滚动通过容器部分时视差开始

时间:2019-03-14 22:36:51

标签: javascript parallax vanilla-typescript

所有人。

我不知道我在做什么错。我正在开发视差功能

HTML:

<div class="o-container">
  <div class="parallax">
  </div>
</div>

JS:

window.addEventListener("scroll", function() {

  var scrolledHeight= window.pageYOffset;

  $$(".parallax").forEach(function(el,index,array) {
    var scrolledSectionHeight = el.closest('.o-container').pageYOffset;

    var limit= el.offsetTop+ el.offsetHeight;
    var speed = el.getAttribute('data-speed');

    //console.log(el.offsetTop + '' + el.offsetHeight);

    if(scrolledHeight > el.offsetTop && scrolledHeight <= limit) {
        el.style.transform= "translate3d(0px, "+ (-(scrolledHeight - el.offsetTop)) /(speed)+ "px" +", 0px) ";
        //console.log('rodando');
    }

  });
});

问题是...当我的滚动通过o容器offsetTop时,我只希望视差进入'IF'并开始起作用。我该怎么办?

0 个答案:

没有答案