This memo from ‘The Complete JavaScript Course 2024: From Zero to Expert!’ on Udemy.
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.)
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%)
};
