Good day. There is a parallax container (parallax is implemented on css, without js)

.parallax { height: 100vh; overflow-y: auto; }

Inside which is the content of the page.
I want to make an animation for one of the page elements inside the parallax container, but the scrollTop, scrollHeight and pageYOffset methods do not work (output via console.log in different versions, always shows either 0 or the screen height (100vh).
Accordingly, the animation because of this does not work.
Here is one of the options that I have tried:

 function showLogo() { var header = document.querySelector(".header").scrollHeight; var scrolled = document.documentElement.scrollTop; var elem = document.getElementById("logo"); if (scrolled >= header) { logo.classList.add("visible"); } else { logo.classList.remove("visible"); } };

I tried to set an event handler on both the window and .parallax, read pageYOffset and scrollTop for window, document, .parallax and elements - it still does not work.

At the same time, the page is more than 100vh, and there is a scroll down.

Is there a way to make onscroll work without changing 100vh for a container per pixel height?

    1 answer 1

    In general, I immediately found the solution myself:

    I wrapped the whole contents in one more container and made height: auto; for the container .parallax:

     .parallax { height: auto; } .parallax__group { position: relative; height: 100vh; transform-style: preserve-3d; }

    Hung up the event handler onscroll = "showLogo ()" on .parallax

    And here is the final code:

     function showLogo() { var header = document.querySelector(".header").scrollHeight; var scrolled = document.querySelector(".parallax").scrollTop; var elem = document.getElementById("logo"); if (scrolled >= header) { logo.classList.add("visible"); } else { logo.classList.remove("visible"); } };

    Animation works. The element appears and disappears when needed. Thanks to all :)