Quero que os elementos desapareçam à medida que rolam para fora da parte superior da página e, em seguida, voltem a desaparecer quando eles voltam para a página. Eu escrevi um código que funciona, mas estou procurando uma solução mais elegante. Aqui está a solução que eu tenho trabalhando no jsfiddle:http://jsfiddle.net/wmmead/JdbhV/3/

Eu gostaria de encontrar um trecho de código muito mais curto e mais elegante, mas não consigo resolvê-lo. Talvez algo com uma matriz e o método each ()? Se eu colocar uma aula nas divs em vez de uma ID, fica muito mais curta, mas depois todas elas desaparecem de uma só vez. Eu quero que cada caixa desapareça enquanto ela rola para fora da página.

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