当jQuery滚动页面时,jQuery淡出元素,当它们向后滚动时淡出

我希望元素在页面顶部滚动时淡出,然后在向后滚动到页面时淡入.我写了一些有用的代码,但我正在寻找更优雅的解决方案.这是我在jsfiddle上工作的解决方案： http://jsfiddle.net/wmmead/JdbhV/3/

我想找到一个更短,更优雅的代码,但是不能完全解决它.也许有一个数组和each()方法？如果我把一个类放在div而不是ID上,它会缩短很短的时间,但是它们会立刻淡出.我希望每个框在页面滚动时淡出.

HTML

<div id="Box1"></div>
<div id="Box2"></div>
<div id="Box3"></div>
<div id="Box4"></div>
<div id="Box5"></div>
<div id="Box6"></div>

CSS

#Box1,#Box2,#Box3,#Box4,#Box5,#Box6 {
  width: 100px;
  height: 100px;
  background: orange;
  margin:100px auto;
}
#Box6 {
  margin-bottom:600px;
}

jQuery的

var Box1Top = $('#Box1').offset().top;
var Box2Top = $('#Box2').offset().top;
var Box3Top = $('#Box3').offset().top;
var Box4Top = $('#Box4').offset().top;
var Box5Top = $('#Box5').offset().top;
var Box6Top = $('#Box6').offset().top;

$(window).scroll(function () {
if ((Box1Top - $(window).scrollTop()) < 20) {
    $('#Box1').stop().fadeTo(100,0);
} else {
    $('#Box1').stop().fadeTo('fast',1);
}

if ((Box2Top - $(window).scrollTop()) < 20) {
    $('#Box2').stop().fadeTo(100,0);
} else {
    $('#Box2').stop().fadeTo('fast',1);
}

if ((Box3Top - $(window).scrollTop()) < 20) {
    $('#Box3').stop().fadeTo(100,0);
} else {
    $('#Box3').stop().fadeTo('fast',1);
}

if ((Box4Top - $(window).scrollTop()) < 20) {
    $('#Box4').stop().fadeTo(100,0);
} else {
    $('#Box4').stop().fadeTo('fast',1);
}

if ((Box5Top - $(window).scrollTop()) < 20) {
    $('#Box5').stop().fadeTo(100,0);
} else {
    $('#Box5').stop().fadeTo('fast',1);
}
if ((Box6Top - $(window).scrollTop()) < 20) {
    $('#Box6').stop().fadeTo(100,0);
} else {
    $('#Box6').stop().fadeTo('fast',1);
}
});

解决方法

你可以使用属性选择器'[attr =“someattr”]’来使用jQuery的.each()方法：

$(window).scroll(function () {
   $('[id^="Box"]').each(function () { // <---loop the divs id starts with #Box 
      if (($(this).offset().top - $(window).scrollTop()) < 20) { //<---mark the $(this).offset().top of current object
          $(this).stop().fadeTo(100,0); //<----fadeOut the current obj
      } else {
          $(this).stop().fadeTo('fast',1); //<----fadeIn the current obj
      }
   });
});

您可以在这里进行演示：

DEMO

当jQuery滚动页面时,jQuery淡出元素,当它们向后滚动时淡出

解决方法

猜你在找的jQuery相关文章