Pages don't react on event listeners in Next.js

Question

I have very weird situation. In my Next.js project I have created header which change colour on page scroll using useEffect hook:

Hook in Header component:

React.useEffect(() => {
  window.addEventListener('scroll', () => {
    setBackground(window.scrollY > 620);
  });
}, []);

Also, I have default layout with this header, to make it visible on every page, and here is the problem, this changing colour effect works only on main page, and when I do console.log like this, I can see it only on main page, and nowhere else..

React.useEffect(() => {
  window.addEventListener('scroll', () => {
    console.log(123);
    setBackground(window.scrollY > 620);
  });
}, []);

Also, I was trying to place this hook on different pages, set this event listener and just print at least window.scrollY value - as a result - nothing, no result or log or error. This event listener works only on main page, and nowhere else. What's wrong?

Answer 1

I have found, why it happens, actually, it was about pages' layout, I was using default wrapper for every page, that looks like this:

width: 100%;
height: calc(100vh - 50px);
overflow: scroll;
&.flex {
  display: flex;
}

As you can see, height isn't set in pixels, so, when I changed it to pixels, is started working, so, watch out for your unit.