Intersection Observer & Efficient Scroll Handling

How can you implement efficient scroll-based navigation highlighting?

const navObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    const id = entry.target.id;
    const navItem = document.querySelector(`nav a[href="#${id}"]`);
    
    if (entry.intersectionRatio > 0) {
      navItem?.classList.add('active');
    } else {
      navItem?.classList.remove('active');
    }
  });
}, {
  rootMargin: '-50% 0px',
  threshold: 0
});

Check scroll position repeatedly
Add click handlers to navigation items
Use Intersection Observer with adjusted rootMargin
Using Intersection Observer for scroll-based navigation highlighting is efficient because: 1) The rootMargin of -50% effectively creates a middle viewport zone for determining the current section, 2) No manual calculations of element positions are needed, 3) The browser handles all intersection calculations efficiently, 4) It naturally handles different viewport sizes and dynamic content. The code demonstrates how to highlight navigation items based on which section is currently in view, using an optimal configuration for typical navigation scenarios.
Calculate element positions on scroll

Next Question (13/20)