当页面滚动时，jQuery淡出元素，并在它们重新进入视图时淡入。

Question

我希望元素在滚动到页面顶部后淡出，然后在滚回页面时再淡入。我写了一些代码可以实现，但我正在寻找更优雅的解决方案。这是我在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);
}
});

- Bill Mead

Answer 1

您可以使用jQuery的.each()方法结合属性选择器'[attr="someattr"]'来实现相关操作：

$(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:

DEMO

- Jai

---

太棒了，我知道有更好的方法来做这件事！谢谢！ - Bill Mead

Answer 2

这个版本的jsfiddle被认为更好的原因:

• 良好的功能分解（它被分成小函数）：对您和其他编码人员更高的可读性，并且如果您需要更改某些内容，未来更容易维护。
• 灵活性：您可以更改框的数量，甚至不知道JavaScript！
• 效率：由于功能分解，这意味着每行代码只有在必要时才会被调用。

除了JavaScript之外，我还添加了类别以补充现有的ID。例如：id="box1" class="box"

享受吧 :)

- mn.

---

非常令人印象深刻，但对于我的目的来说并不值得那么复杂；-) - PJ Brunet

Answer 3

嗯，我想你可以为所有的div设置一个类。不要使用每个div的#id来调用它们。

- Maxim Ershov

---

这将使它们全部消失，一旦其中一个触及窗口顶部。这不是期望的效果。 - Bill Mead

不是很确切，如果你添加一个“for”循环来检查它们中哪一个具有所需的位置。 - Maxim Ershov