Добрый день. Есть параллакс-контейнер (параллакс реализован на css, без js)
.parallax {
height: 100vh;
overflow-y: auto;
}
Внутри которого располагается контент страницы.
Хочу сделать анимацию для одного из элементов страницы, внутри параллакс-контейнера, но методы scrollTop, scrollHeight и pageYOffset не работают (выводил через console.log в разных вариантах, всегда показывает либо 0, либо высоту экрана (100vh).
Соответственно анимация из-за этого не работает.
Вот один из вариантов, которые я пробовал:
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");
}
};
Пробовал ставить обработчик события и на window, и на .parallax, считать pageYOffset и scrollTop для window, document, .parallax и элементов - все равно не работает.
При этом страница больше чем 100vh, и скролл вниз есть.
Есть способ заставить работать onscroll без изменения 100vh для контейнера на пиксельную высоту?