Quiero que los enlaces en mi barra de navegación tengan una clase activa cuando te desplazas a la sección correspondiente.
El siguiente código funcionaba bien hasta que implementé una biblioteca de desplazamiento/paralaje suave que elimina el evento de desplazamiento.
Traté de hacer que el código funcionara usando el evento de la rueda , intenté ver si había algo similar a scrollY para los eventos de la rueda, pero no pude encontrar nada.
¿Alguna idea sobre cómo podría implementar esta característica? Puede ser diferente a la implementación que tenía antes.
EDITAR: Aquí hay un codepen . Si descomentas la parte de la locomotora, el código ya no funciona. ¿Cómo puedo hacer que funcione?
const sections = document.querySelectorAll("section"); const navLinks = document.querySelectorAll("nav a"); window.addEventListener("scroll", function () { let navbar = document.querySelector("nav"); let current = ""; sections.forEach(function (section) { const sectionTop = section.offsetTop; const sectionHeight = section.clientHeight; if (scrollY >= sectionTop - sectionHeight / 3) { current = `#${section.getAttribute("id")}`; } navLinks.forEach(function (each) { // add/remove active class each.classList.remove("nav-active"); if (each.getAttribute("href") == current) { each.classList.add("nav-active"); } }); }); });Intenta usar un IntersectionObserver en su lugar:
const navLinks = document.querySelectorAll("nav a"); const updateNav = (entries, observer) => { const matchingIds = entries.filter(e => e.isIntersecting).map(e => `#${e.target.id}`); if (matchingIds.length !== 0) { const current = matchingIds[0]; navLinks.forEach(function(link) { link.classList.remove("nav-active"); if (link.getAttribute("href") == current) { link.classList.add("nav-active"); } }); } }; const options = { root: null, rootMargin: "0px", threshold: 0.66 } const observer = new IntersectionObserver(updateNav, options); document.querySelectorAll("*[data-scroll-section]").forEach(el => observer.observe(el));