Question

我正在尝试在没有任何插件的情况下构建简单的重叠“视差”效果。我有像：

<section>
    <h2>Example Text</h2>
</section>
<section>
    <h2>Example Text</h2>
</section>
<section>
    <h2>Example Text</h2>
</section>
<section>
    <h2>Example Text</h2>
</section>
<section>
    <h2>Example Text</h2>
</section>

每个部分的高度为视口的100％。我在$(window).scroll()内使用了每个循环。我需要为顶部的transform: translateY()属性设置动画，直到以下部分位于浏览器的顶部。这个百分比基本上需要基于浏览器顶部的百分比。我尝试过很多方法，包括获取offset().top和height()值，并将它们与$(window).scrollTop()进行比较，但我似乎无法解决这个问题。这是我试图实现的效果，尽管它使用的是jQuery插件。

http://codepen.io/rocbear/pen/bdIaG

修改我现在几乎已经解决了这个问题，但我有一个小问题滚动到顶部。 translate属性不会一直回到0％并且在顶部留下空隙。

我的代码：http://codepen.io/mdmoore/pen/MwjoLZ

$(function(){
  $('section').each(function() {
    var off = $(this).offset().top
    $(this).data('orig-offset', off);
  });
  $(window).scroll(function(){
    var scrollTop = $(window).scrollTop();

    $('section').each(function(){
      var off = $(this).data('orig-offset');
      var translate =  (scrollTop - off) / $(window).height() * 100;
      if (scrollTop >= off) {
        $(this).css({transform: 'translateY(' + translate +'%)'});
      }
    });
  });
});

Answer 1

这是一种方式。如果您愿意，请随意优化它。

$(function(){
  $('section').each(function() {
    var off = $(this).offset().top
    $(this).data('orig-offset', off);
  });
  $(window).scroll(function(){
    var scrollTop = $(window).scrollTop();

     $('section').each(function(){
      var off = $(this).data('orig-offset');
      
       
      if (scrollTop >= off) {
        var translate =  (scrollTop - off) / $(window).height() * 100;
        console.log(translate);
        $(this).css({transform: 'translateY(' + translate +'%)'});
      }
     });
  });
});

html, body {
  height: 100%;
  margin: 0;
}

h2 {
  margin: 0;
  text-align: center;
}

section {
  background: #000;
  height: 100%;
  width: 100%;
  position: relative;
  top: 0;
}
section:first-of-type {
  background-color: coral;
}
section:nth-of-type(2) {
  background-color: lightgreen;
}
section:nth-of-type(3) {
  background-color: lightblue;
}
section:nth-of-type(4) {
  background-color: #ffff6e;
}
section:nth-of-type(5) {
  background-color: #3c3c3c;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="top">
<h2>Some Text</h2>
</section>
<section>
<h2>Some Text</h2>
</section>
<section>
<h2>Some Text</h2>
</section>
<section>
<h2>Some Text</h2>
</section>
<section>
<h2>Some Text</h2>
</section>

jQuery Animate translateY基于滚动百分比

1 个答案: