Ich möchte, dass Elemente ausgeblendet werden, wenn sie oben auf der Seite angezeigt werden, und dann wieder eingeblendet werden, wenn sie wieder auf der Seite angezeigt werden. Ich habe einen Code geschrieben, der funktioniert, aber ich suche nach einer eleganteren Lösung. Hier ist die Lösung, mit der ich an jsfiddle arbeite:http://jsfiddle.net/wmmead/JdbhV/3/

Ich würde gerne ein viel kürzeres, eleganteres Stück Code finden, kann es aber nicht ganz herausfinden. Vielleicht etwas mit einem Array und der each () -Methode? Wenn ich eine Klasse anstelle einer ID auf die divs lege, wird sie viel kürzer, aber dann werden sie alle auf einmal ausgeblendet. Ich möchte, dass jedes Kästchen ausgeblendet wird, wenn es von der Seite gescrollt wird.

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