Estoy usando este código para resaltar la barra de navegación cuando me desplazo por las secciones. ¿Es posible cambiar la URL en la barra de direcciones al instante cuando me desplazo a una sección? ¿Alguien puede ayudarme?
Gracias por adelantado
const [current, setCurrent] = useState('') const sections = document.querySelectorAll('h3') const navLi = document.querySelectorAll('nav ul li') window.addEventListener('scroll', () => { sections.forEach(section => { const sectionTop = section.offsetTop if (window.pageYOffset >= sectionTop && (window.pageYOffset + 100) - sectionTop < 200 && current !== section.getAttribute('id')) { setCurrent(section.getAttribute('id')) } }) }) useEffect(() => { navLi.forEach(li => { li.classList.remove('test') if(li.classList.contains(current)) { li.classList.add('test') } }) }, [current])Use un observador de intersección :) Intente esto localmente con una pequeña ventana de navegación. No funcionará con fragmentos de StackOverflow debido a problemas de origen de CORS/iframe, los fragmentos se ejecutan en un iframe.
<p class="x">Bloop1</p> <p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p> <p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p> <p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p> <p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p> <p class="x">Bloop2</p> <p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p> <p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p> <p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p> <p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p> <p class="x">Bloop3</p> <p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p> <p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p> <p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p> <p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p> <script> // which elements to keep track of when they scroll into view const elements = document.querySelectorAll(".x"); // this is observing when the element will come into view const observer = new IntersectionObserver((x) => { // this is just to get an example const text = x[0].target.textContent; console.log(text); // this actually changes the URL window.history.pushState(text, "Title", "/" + text); }); // register the observer for each element we are interested in elements.forEach((x) => { observer.observe(x); }); </script>