1

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

0

1 ответ 1

2

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

Обернул все содержимое еще в один контейнер и сделал 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");
  }
};

Анимация работает. Элемент когда надо появляется и исчезает. Всем спасибо :)

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.