I have this simple observer which add and removes classes based on entry.isIntersecting. Everything works fine except when view port is resized to particular size (this size is related to threshold) observer goes to infinite loop switching entry.isIntersecting. I am aware why is this happening and that this is probably a easy fix, but i just can't find it.
const stickyNavReveal = function(entries){
const [entry] = entries
if(!entry.isIntersecting){
//add class for sticky navigation
nav.classList.add('sticky');
toTop.classList.remove('hidden');
}
else{
nav.classList.remove('sticky');
toTop.classList.add('hidden');
}
}
const headerObserver = new IntersectionObserver(stickyNavReveal, {
root:null,
rootMargin:'40px',
threshold:[0.4]
})
headerObserver.observe(header)