Tengo este código HTML básico que tiene secciones, y luego creé una barra de navegación básica dinámicamente por javaScript
function buildNav() { for (section of sections) { let item = document.createElement("li"); item.innerHTML = `<a data-nav="${section.id}">${section.dataset.nav}</a>`; item.classList.add("item"); } navBar.appendChild(item); } }y usé esta función para agregar una clase activa a cada sección
function isInView(element) { const rect = element.getBoundingClientRect(); return rect.top >= -70 && rect.top <= 300; }; function addActive() { document.addEventListener( "scroll", () => { for (section of sections) { if(isInView(section)){ section.classList.add('active') }else{section.classList.remove('active')} }; }) }mi pregunta es ¿cómo puedo resaltar el elemento en la barra de navegación que representa la sección a la vista?
Debe aplicar la clase activa solo al elemento que coincida con la sección actual de la página. Prueba esto: -
function isInView(element) { const rect = element.getBoundingClientRect(); if(rect.top > 70 && rect.top < 150){ //Assumed Y-offset for 1st section return element.id //Assuming it returns 1 for 1st element } else if(rect.top > 150){ return element.id //Returns 2 for 2nd element } }; function addActive() { document.addEventListener( "scroll", () => { for (section of sections) { if(isInView(section) == section.id){ section.classList.add('active') //Only apply active class to this section } else{ section.classList.remove('active') //Remove the active class from all other sections } }; }) }