How to know if the user has scrolled below the header?

user_18511975 0
Viewed 65

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

css html javascript
1 Answers

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>

user_64852490
Related