改变导航栏反应js的颜色

Question

我正在尝试使用此代码更改导航栏的颜色。

  const [navbarColor, setNavbarColor] = useState("navbar-transparent");
  const [collapseOpen, setCollapseOpen] = useState(false);
  useEffect(() => {
    const updateNavbarColor = () => {
      if (
        document.documentElement.scrollTop > 399 ||
        document.body.scrollTop > 399
      ) {
         setNavbarColor("");
      } else if (
        document.documentElement.scrollTop < 400 ||
        document.body.scrollTop < 400
      ) {
        setNavbarColor("navbar-transparent");
      }
    };
    window.addEventListener("scroll", updateNavbarColor);
    return function cleanup() {
      window.removeEventListener("scroll", updateNavbarColor);
    };
  });

这就是我制作导航栏的方式

      <Navbar className={"fixed-top " + navbarColor} expand="lg" color="info">

但是，当我向下滚动网页时，虽然代码看起来不错，但网页崩溃了。

Answer 1

试试这个逻辑代码。

import { useEffect } from 'react'


export function useObservableAnimations() {

  const animationOnScroll = () => {
 const target = document.querySelectorAll('[data-animation')
    target.forEach(element => {
      if (element.getBoundingClientRect().top < window.innerHeight) {
        element.classList.add('animation-start')
        return
      }
      element.classList.remove('animation-start')
    })
  }
  useEffect(() => {
    window.addEventListener('scroll', animationOnScroll)
  }, [])
}