Триггерное событие, когда нижняя часть элемента совпадает с нижней частью окна - PullRequest
Новая
       20

Триггерное событие, когда нижняя часть элемента совпадает с нижней частью окна

0 голосов
/ 16 марта 2019

У меня есть простой параллакс, который я делаю, но я бы хотел вызвать параллакс, когда нижняя часть соответствующего элемента находится на одном уровне с нижней частью окна.

У меня есть фактический параллаксработает, но эта следующая часть оказывается трудной.Я думал, что я буду использовать offsetTop как-то?И вычесть высоту элемента, который я параллаксирую, но чтение смещения MDN-документов только даст вам смещение относительно ближайшего родителя?И рассматриваемый элемент в этом примере является дочерним по отношению к другому элементу контейнера.

Если кто-нибудь знает, как решить, как вызвать функцию параллакса, когда нижняя часть требуемого элемента совмещена с нижней частью окна, котороебыло бы удивительно.

** Примечание - я не могу использовать IntersectionOberver, потому что это вызывает ужасный анимационный рывок в других аспектах страницы, которые используют Greensock.

Codepen: https://codepen.io/emilychews/pen/BbxZJp

function parallax() {
  
  window.addEventListener('scroll', function(e) {

    var parallaxItem = document.getElementsByClassName("parallax");

    var scrolled = window.pageYOffset,
        bottomOfWindow = (window.pageYOffset + window.innerHeight);
        
        // bottomOfParallaxItem = the bit I need help with

    for (i=0; i < parallaxItem.length; i++) {

      parallaxItem[i].style.transform = 'translateY(-' + (scrolled * .2) + "px" + ")";

    }

  });

}

requestAnimationFrame(parallax);
* {box-sizing: border-box;}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 300vh;
  margin: 0;
  padding: 0;
  font-family: arial-black;
}

.outer-container {
  display: grid;
  justify-items: center;
  align-items: center;
  width: 50%;
  height: 80%;
  background: #e6e6e6;
}

.inner-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: red;
  width: 50%;
  height: 50%;
}
<div class="outer-container">
  <div class="inner-container parallax">
    <p>Bottom of this container</p>
  </div>
</div>
...