jQuery在页面上滚动时淡出元素，在页面上滚动时淡出元素 [英] jQuery fade out elements as they scroll off page, fade back as they scroll back on

问题描述

我希望元素在滚动离开页面顶部时逐渐消失，然后在滚动回到页面上时逐渐消失.我写了一些有效的代码，但我正在寻找更优雅的解决方案.这是我正在使用jsfiddle的解决方案: http://jsfiddle.net/wmmead/JdbhV/3/

I want elements to fade out as they scroll off the top of the page, and then fade back in as they scroll back onto the page. I wrote some code that works, but I am looking for a more elegant solution. Here is the solution I have working on jsfiddle: http://jsfiddle.net/wmmead/JdbhV/3/

我想找到一段短得多，更优雅的代码，但无法完全解决.也许有一个数组和each()方法的东西?如果我将一个类而不是ID放在div上，它的长度会缩短很多，但是它们会立即消失.我希望每个框在页面上滚动时都消失.

I would like to find a much shorter, more elegant piece of code, but just can't quite work it out. Maybe something with an array and the each() method? If I put a class on the divs instead of an ID, it gets a lot shorter, but then they all fade out at once. I want each box to fade out as it scrolls off the page.

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()方法一起使用:

You can use attribute selector '[attr="someattr"]' with use of .each() method of jQuery:

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

您可以在此处进行演示:

You can take a demo here:

这篇关于jQuery在页面上滚动时淡出元素，在页面上滚动时淡出元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！