JQuery wygasają elementy, gdy przewijają się ze strony, cofają się, gdy przewijają się ponownie

Question

Apr 09, 2013, 07:45 AM

JQuery wygasają elementy, gdy przewijają się ze strony, cofają się, gdy przewijają się ponownie

Chcę, aby elementy zanikały, gdy przewijają się u góry strony, a następnie znikają, gdy przewijają się z powrotem na stronę. Napisałem kod, który działa, ale szukam bardziej eleganckiego rozwiązania. Oto rozwiązanie, nad którym pracuję nad jsfiddle:http://jsfiddle.net/wmmead/JdbhV/3/

Chciałbym znaleźć znacznie krótszy, bardziej elegancki fragment kodu, ale nie do końca go rozpracuję. Może coś z tablicą i metodą each ()? Jeśli umieściłem klasę na divach zamiast ID, staje się to znacznie krótsze, ale potem wszystkie zanikają jednocześnie. Chcę, aby każde pudełko zanikało, gdy przewija się przez stronę.

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