Onepager Navigation Active States

WP FSE Theme

JavaScript
const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('.wp-block-navigation-item__content');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    const activeLink = document.querySelector(`.wp-block-navigation-item__content[href="#${entry.target.id}"]`);
    
    if (entry.isIntersecting) {
      navLinks.forEach(link => link.classList.remove('active'));
      if (activeLink) activeLink.classList.add('active');
    }
  });
}, { threshold: 0.5 });

sections.forEach(section => observer.observe(section));