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);
  });
});

Viewport Scroll Spy Generator

HTML Structure

CSS for Active State

JavaScript Logic

How do I use this code?

How does this work?

Can I change the active style?

What does `threshold: 0.7` mean?