jQuery元素在滚动离开页面时淡出，在滚动返回页面时淡出

我希望元素在从页面顶部滚动时淡出，然后在返回页面时淡入。我写了一些有效的代码，但我正在寻找一个更优雅的解决方案。以下是我在JSFIDLE上的解决方案：

我想找到一段短得多、优雅得多的代码，但就是做不出来。可能是一个数组和each（）方法？如果我把一个类放在div上而不是ID上，它会变短很多，但是它们会立刻消失。我希望每个框在滚动离开页面时淡出

HTML

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

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；
$（窗口）。滚动（函数（）{
如果（（box1Top-$（window.scrollTop（））<20）{
$（'#box1'）.stop（）.fadeTo（100,0）；
}否则{
$（'#box1'）.stop（）.fadeTo（'fast'，1）；
}
if（（box2Top-$（window.scrollTop（））<20）{
$（'#box2'）.stop（）.fadeTo（100,0）；
}否则{
$（'#box2'）.stop（）.fadeTo（'fast'，1）；
}
如果（（box3Top-$（window.scrollTop（））<20）{
$（'#box3'）.stop（）.fadeTo（100,0）；
}否则{
$（'#box3'）.stop（）.fadeTo（'fast'，1）；
}
如果（（box4Top-$（window.scrollTop（））<20）{
$（'#box4'）.stop（）.fadeTo（100,0）；
}否则{
$（'#box4'）.stop（）.fadeTo（'fast'，1）；
}
如果（（box5Top-$（window.scrollTop（））<20）{
$（'#box5'）.stop（）.fadeTo（100,0）；
}否则{
$（'#box5'）.stop（）.fadeTo（'fast'，1）；
}
如果（（box6Top-$（window.scrollTop（））<20）{
$（'#box6'）.stop（）.fadeTo（100,0）；
}否则{
$（'#box6'）.stop（）.fadeTo（'fast'，1）；
}
});

好吧，我想只要为你所有的div设置一个类就行了。您可以使用属性选择器

'[attr=“someattr”]

并使用jQuery的

。each（）

方法，而不是用一个#id调用每一个：

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

$（窗口）。滚动（函数（）{
$（'[id^=“box”]”）。每个（函数（）{/：


功能分解良好（分解成小函数）：对于您和其他程序员来说，可读性更高，并且如果您需要更改某些内容，在将来更容易维护
灵活性：您可以更改框的数量，甚至不知道javascript
效率：由于功能分解，这意味着只有在100%必要时才能调用每一行代码

除了javascript之外，我还在现有id之外添加了类。例如：
id=“box1”class=“box”

享受：）
这会让它们一碰到窗口顶部就消失。这不是期望的效果。不是真的，如果你添加一个“for”循环来检查它们中的哪个位置完美，我知道有更好的方法！谢谢！非常令人印象深刻，但不值得我这么复杂；-）
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);
}
});

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