Change Homepage nav links color on scroll past first section

#1. First, find Section ID. Here we will find SECOND SECTION ID.

In my example, we will have: section[data-section-id=“67472f49ffa1ba4b6e64aab5”]

#2. Use this code to Custom CSS box

body.scroll-past div.header-nav-item>a {
  color: #f1f !important;
}

#3. Use this code to Code Injection > Footer.

<script>
document.addEventListener('DOMContentLoaded', () => {
  const init = () => {
    const secondSection = document.querySelector('[data-section-id="67472f49ffa1ba4b6e64aab5"]');
    const body = document.body;
    const header = document.querySelector('header');
    
    if (!secondSection || !body || !header) {
      console.log('Required elements not found, retrying...');
      setTimeout(init, 100); // Retry after 100ms
      return;
    }
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          body.classList.add('scroll-past');
        } else {
          body.classList.remove('scroll-past');
        }
      });
    }, {
      threshold: 0,
      rootMargin: '-10% 0px 0px 0px' // Trigger slightly before element enters viewport
    });
    observer.observe(secondSection);
    console.log('Scroll handler initialized');
  };
  // Start initialization
  init();
});
</script>

Remember to change ID in the code.

#4. Result

Nav links color will change when users scroll over past first section on homepage

image

1 Like