![](https://i0.wp.com/media.dev.to/cdn-cgi/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffys4dq5n66sfiurf8ez0.png?w=1200&ssl=1)
This memo from ‘The Complete JavaScript Course 2024: From Zero to Expert!’ on Udemy.
const header = document.querySelector('.header');
const navHeight = nav.getBoundingClientRect().height; const stickyNav = function (entries) { const [entry] = entries; // entries[0] if (!entry.isIntersecting) nav.classList.add('sticky'); else nav.classList.remove('sticky');
}; const headerObserver = new IntersectionObserver(stickyNav, { root: null, threshold: 0, rootMargin: `-${navHeight}px`,
});
headerObserver.observe(header);
Bad way(The performance of the app on mobile devices is affected by the firing of an event on every scroll.)
const initialCoords = section1.getBoundingClientRect() window.addEventListener('scroll', function(e) { console.log(window.scrollY); if(window.scrollY > initialCoords.top) nav.classList.add('sticky'); else nav.classList.remove('sticky') }) const obsCallback = function (entries, observer) { entries.forEach(entry => { console.log(entry); });
}; const obsOptions = { root: null, threshold: [0, 0.2], // [0, 1, 0.2] (100%)
};