actualmente tengo un componente de barra de navegación y me gustaría cambiar su color de fondo en el desplazamiento. Estoy tratando de detectar la altura de desplazamiento pero no funciona. Cada vez que abro la consola, mi console.log sigue devolviendo 0, lo que significa que no se detecta el desplazamiento. He analizado muchas preguntas sobre este problema y he intentado aplicar sus soluciones, pero aún no funciona.

Aquí está mi código:

Navbar.js

 function Navbar() { const[navbar,setNavbar]=useState(false); const changeBackground=()=>{ console.log(window.scrollY) if(window.scrollY >= 80){ setNavbar(true) } else{ setNavbar(false) } } window.addEventListener('scroll',changeBackground,true); return ( <> <div className={navbar ? 'navbar_container active':'navbar_container'}> </div> ) } export default Navbar;

Barra de navegación.css

 .navbar_container { align-items: center; background-color: transparent; color: white; display: flex; flex-direction: row; height: 94px; justify-content: space-between; margin: 0 auto; width: 98%; z-index: 100; position: fixed; width: 100vw; } .navbar_container.active { align-items: center; background-color: black; color: white; display: flex; flex-direction: row; height: 94px; justify-content: space-between; margin: 0 auto; width: 98%; z-index: 100; position: fixed; width: 100vw; }

Inicio.js

 function Home(){ return( <Navbar/> )}