ReactJS 监听页面滚动距离变更页面样式

// 省略IMG_LOGO,IMG_LOGO_WHITE 导入

  // logoURL
  const [logoSrc, setLogoSrc] = useState(IMG_LOGO);
  // 头样式
  const [headerClass, setHeaderClass] = useState('page-header');
  // 隐藏
  const [showSpan, setShowSpan] = useState(false);
  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  })

  const handleScroll = () => {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // console.log('scrollTop', scrollTop)
    // 滚动距离668
    if (scrollTop > 668) {
      setLogoSrc(IMG_LOGO_WHITE)
       // 需要有对应的样式,这里你可以自定义你自己的样式 class
      setHeaderClass('page-header-white-font')
       // 显示
      setShowSpan(true)
    } else {
      // 自定义logo
      setLogoSrc(IMG_LOGO)
      // 需要有对应的样式,这里你可以自定义你自己的样式 class
      setHeaderClass('page-header')
        // 隐藏
      setShowSpan(false)
    }
  }

header HTML代码

  return (
    <header className={headerClass}>
         <!--  省略 -->
    </header>
  )