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

Question

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

Answer 1

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>