There is a complex dynamic header. When scrolling, it is necessary that its part (middle floor) follows the user. I need to find out at what point this middle floor disappears from the user's field of view (screen height) and when it returns to the top. any ideas? Without jQuery pls
Here it is with IntersectionObserver:
window.onload = () => {
const options = {
root: null,
rootMargin: '0px',
threshold: 0
}
const observer = new IntersectionObserver((entries, observer) => {
console.log('Scrolled');
}, options);
let header = document.querySelector('header');
observer.observe(header);
}* {
margin: 0;
padding: 0;
}
body {
height: 150vh;
}
header {
height: 150px;
background-color: orangered;
}<header>
Here header
</header>