Estoy tratando de agregar un nombre de clase a la barra de navegación cuando el usuario se desplaza hacia abajo. Hice esto:
var myNav = document.getElementById("nav"); window.onscroll = function() { "use strict"; if (document.body.scrollTop >= 150 || document.documentElement.scrollTop >= 150) { myNav.classList.add("scroll"); } else { myNav.classList.remove("scroll"); } };Pero me dio un error:
Cannot read properties of null (reading 'classList')no se porque :(
Obtiene ese error porque no existe ningún elemento con esa identificación. Tal vez no exista todavía , o tal vez nunca exista. Pero de cualquier forma, te recomiendo que evites mezclar react con manipulación directa del dom. La forma de reaccionar para hacer esto es escuchar el desplazamiento en un useEffect y luego establecer el estado:
const NavBar = () => { const [scroll, setScroll] = useState(false); useEffect(() => { const handleScroll = () => { setScroll(document.body.scrollTop >= 150 || document.documentElement.scrollTop >= 150); } window.addEventListener('scroll', handleScroll); return () => { window.removeEventListener('scroll', handleScroll); } }, []); return ( <div id="nav" className={scroll ? "scroll" : undefined}> </div> ); }