Changing color of Navbar react js

Question

I am trying to change the color of my navbar using this code.

  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);
    };
  });

This is how I am making navbar

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

However, when I scroll down the web page crashes, although the code looks fine.

Answer 1

Try this logic code.

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)
  }, [])
}