Jquery 多个div的不透明度滚动动画

我已经找到了一个jQuery脚本，当我向下滚动时（或者当div到达顶部时），它会将第一个div的不透明度从1更改为0

但现在我想让下一个div在到达页面顶部时也这样做，而不是在同一时间

以下是代码的一些部分：

这就是HTML部分：

<div id="wrap">

  <section id="logo">
    <img src="images/layout/logo.png"> 
  </section> <!-- logo -->

  <section id="intro">  
    <img src="images/layout/welcome.png">

    <p><h2>Text text text text here here here here</h2></p>
  </section> <!-- intro -->

</div>

为了完全清楚发生了什么，我给您留下了我当前页面的链接：

---

我只是希望“更近一点”div与“logo”div的效果相同，等等。

我会在开始时将它们全部添加，只有在范围内时才将它们淡入淡出

var divs = $('#logo, #intro');
var range = 100;
$(window).on('scroll', function() {
   var st = $(this).scrollTop();
   divs.each(function() {
      var offset = $(this).offset().top;
      $(this).css({ 'opacity' : (1 - ((st - offset + range) / range)) });
   });
});

更新

这似乎效果更好。基于对象的中心而不是顶部淡入淡出

var divs = $('#logo, #intro');
var range = 100;
$(window).on('scroll', function() {
   var st = $(this).scrollTop();
   divs.each(function() {
      var offset = $(this).offset().top;
      var height = $(this).outerHeight();
      offset = offset + height/2;
      $(this).css({ 'opacity' : (1 - ((st - offset + range) / range)) });
   });
});

资源

---

您的脚本在以下行中似乎有错误：if（st-offset）是的，您可以取出

if

语句，通过'1-（（docScrollTop-divOffsetTop+range）/100）查找不透明度，谢谢，效果很好！是否可以添加一些“检查点”，使其从顶部开始以100px的速度衰减？例如@Xavier只需在

$（document.ready（）

var divs = $('#logo, #intro');
var range = 100;
$(window).on('scroll', function() {
   var st = $(this).scrollTop();
   divs.each(function() {
      var offset = $(this).offset().top;
      var height = $(this).outerHeight();
      offset = offset + height/2;
      $(this).css({ 'opacity' : (1 - ((st - offset + range) / range)) });
   });
});