Toggle Menu
Toolbly
Home
Tools
Blog
About
Contact
Privacy
Terms
Toggle theme
Home
Web Tools
Viewport Scroll Spy Generator
Viewport Scroll Spy Generator
Generate a JS snippet to track scroll position and highlight active sections.
HTML Structure
<nav> <a href="#section1">Section 1</a> <a href="#section2">Section 2</a> <a href="#section3">Section 3</a> </nav> <div id="section1">...</div> <div id="section2">...</div> <div id="section3">...</div>
CSS for Active State
nav a.active { font-weight: bold; text-decoration: underline; }
JavaScript Logic
document.addEventListener('DOMContentLoaded', () => { const sections = document.querySelectorAll('div[id]'); const navLinks = document.querySelectorAll('nav a'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { navLinks.forEach(link => { link.classList.remove('active'); if (link.getAttribute('href').substring(1) === entry.target.id) { link.classList.add('active'); } }); } }); }, { threshold: 0.7 }); sections.forEach(section => { observer.observe(section); }); });
How do I use this code?
How does this work?
Can I change the active style?
What does `threshold: 0.7` mean?