jQuery disparaissent des éléments lorsqu'ils font défiler la page, fondue en arrière lorsqu'ils font défiler

Je veux que des éléments disparaissent lorsqu'ils font défiler le haut de la page, puis disparaissent pendant qu'ils font défiler sur la page. J'ai écrit du code qui fonctionne, mais je cherche une solution plus élégante. Voici la solution que j'ai travaillé sur jsfiddle: http://jsfiddle.net/wmmead/jdbhv/3/

J'aimerais trouver un morceau de code beaucoup plus court et plus élégant, mais je ne peux tout simplement pas y arriver. Peut-être quelque chose avec un tableau et la méthode ()? Si je mets une classe sur les divs au lieu d'une pièce d'identité, cela devient beaucoup plus court, mais ils disparaissent tous à la fois. Je veux que chaque boîte ait disparaître alors qu'elle fait défiler la page. P>

HTML P>

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