Question

我已经找到了一个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>

然后是我的jQuery脚本，目前只适用于徽标部分。

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

为了清楚地知道发生了什么，我给你留下了当前页面的链接：

www.hyker.be/opacity

我只是希望“更接近”的div与“徽标”等相同。

Answer 1

我会在开头添加它们，只有在范围内才会淡化它们。

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)) });
   });
});

<强>资源

http://api.jquery.com/offset/

多个div的不透明滚动动画

1 个答案: