#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