Scroll event и css parallax

266

20 декабря 2016, 21:18

Добрый день. Есть параллакс-контейнер (параллакс реализован на 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 для контейнера на пиксельную высоту?

Answer 1

В общем сразу же нашел сам решение:

Обернул все содержимое еще в один контейнер и сделал height: auto; для самого контейнера .parallax:

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

Повесил обработчик события onscroll = "showLogo()" на .parallax

И вот итоговый код:

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");
  }
};