jQuery(document).ready(function($) { (function() { return; const sections = [ document.getElementById('ch-ggs-web-suite-section-01'), document.getElementById('ch-ggs-web-suite-section-02'), document.getElementById('ch-ggs-web-suite-section-03'), ]; const navItems = { 'ch-ggs-web-suite-section-01': document.getElementById('ch-ggs-web-suite-nav-item-01'), 'ch-ggs-web-suite-section-02': document.getElementById('ch-ggs-web-suite-nav-item-02'), 'ch-ggs-web-suite-section-03': document.getElementById('ch-ggs-web-suite-nav-item-03'), }; // intersection observer setup // const observerOptions = { // root: null, // rootMargin: '0px', // threshold: 0.7, // }; const observerOptions = { root:null, rootMargin: '0px 0px -100% 0px', threshold: 0 }; function observerCallback(entries, observer) { entries.forEach((entry) => { console.log( entry.target, entry.isIntersecting, entry.intersectionRatio ); if (entry.isIntersecting) { // get the nav item corresponding to the id of the section // that is currently in view const navItem = navItems[entry.target.id]; // add 'active' class on the navItem navItem.classList.add('active'); // remove 'active' class from any navItem that is not // same as 'navItem' defined above Object.values(navItems).forEach((item) => { if (item != navItem) { item.classList.remove('active'); } }); } }); } const observer = new IntersectionObserver(observerCallback, observerOptions); sections.forEach((sec) => observer.observe(sec)); })(); (function() { const sentinelEl = document.getElementById('ch-ggs-web-suite-landing-nav-trigger'); const headerEl = document.getElementById('ch-ggs-web-suite-landing-nav'); const stuckClass = 'stuck'; const handler = (entries) => { if (headerEl) { if (!entries[0].isIntersecting) { headerEl.classList.add(stuckClass); } else { headerEl.classList.remove(stuckClass); } } } const observer = new window.IntersectionObserver(handler); observer.observe(sentinelEl); })(); })