Estoy tratando de cambiar el color de mi barra de navegación usando este código.
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); }; });Así es como estoy haciendo la barra de navegación
<Navbar className={"fixed-top " + navbarColor} expand="lg" color="info">Sin embargo, cuando me desplazo hacia abajo, la página web falla, aunque el código se ve bien.
Pruebe este código lógico.
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) }, []) }