Estoy tratando de cambiar activo cuando me desplazo en la barra de navegación, pero no funciona con mi código
Aquí, este es mi código js
<script> let navbar = document.getElementById("nav ul li"); let viewportHeight = window.innerHeight; let navHeight = document.getElementById("nav ul li").offsetHeight; let navbarLinks = document.querySelectorAll("nav ul li a"); window.addEventListener("scroll", e => { scrollpos = window.scrollY; navbarLinks.forEach(link => { let section = document.querySelector(link.hash); if (section.offsetTop <= scrollpos + 20 && section.offsetTop + section.offsetHeight > scrollpos + 20) { link.classList.add("active"); } else { link.classList.remove("active"); } }); }); </script>Aquí, este es mi código html
<nav> <div class="header">Profile</div> <ul class="nav-links"> <li><a href="#page1" class="active">About</a></li> <li><a href="#page2">Social</a></li> <li><a href="#page3">MyWorks</a></li> <li><a href="#page4">Development</a></li> <li><a href="#page6">Encouragement</a></li> <li><a href="#page7">Technique</a></li> </ul> </nav>OK,
Creo que deberías usar document.querySelectorAll(...) en lugar de document.getElementById(...) , (líneas 2 y 4)
porque está utilizando un SELECTOR DE CONSULTA CSS. debe usar getElementById solo cuando selecciona un elemento por su id .