Hice una página de destino de varias secciones con una barra de navegación que contiene los enlaces a las secciones de la página. Necesito dar una clase activa al enlace de la sección más cercana a la parte superior de la página. Intenté usar el detector de eventos de desplazamiento, pero es no funciona correctamente
// responde al desplazamiento dando el estado activo de la barra de navegación para la sección actual
``document.addEventListener("scroll", function() { const scrollPos = document.body.scrollTop; let pos = 0; for (let i = 0; i < sec.length; i++) { // determining pos of current section pos+=sec[i].offsetHeight ; let secPos = sec[i].getBoundingClientRect().y; secPos - scrollPos <= 0 && secPos + pos >= scrollPos ? list[i].classList.add("active") : list[i].classList.remove("active") } });```El evento de desplazamiento funciona correctamente, pero su código no aborda correctamente la lista de elementos que está iterando.
solo intente cambiar list[] a sec[]
document.addEventListener( "DOMContentLoaded", function() { let sec = document.querySelectorAll('section'); console.log(sec); sec[0].classList.add("active") document.addEventListener("scroll", function() { const scrollPos = document.body.scrollTop; let pos = 0; for (let i = 0; i < sec.length; i++) { // determining pos of current section pos+=sec[i].offsetHeight ; let secPos = sec[i].getBoundingClientRect().y; if ((secPos - scrollPos <= 0) && (secPos + pos >= scrollPos)) sec[i].classList.add("active"); else sec[i].classList.remove("active"); } }) }) section { font-size: 80px; text-align: center; width: 300px; margin: 20px auto; background-color: pink; border: 1px solid red; } section.active { border: 1px solid blue; background-color: cyan; } <section>1</section> <section>2</section> <section>3</section> <section>4</section> <section>5</section> <section>6</section> <section>7</section> <section>8</section>