Это то, что я придумал. Я думаю, что это можно улучшить путем кэширования значений scrollTop, но это довольно хорошо. Я включил структуру для кэширования рабочих столов, но не код реализации. Я также только реализовал прокрутку вниз, чтобы скрыть div. Я оставил повторную демонстрацию их в качестве упражнения для вас.
Когда окно прокручивается, мы получаем последний скрытый div. Мы знаем, что все до этого div уже спрятано. Затем используйте «пока следующий элемент находится за пределами экрана», чтобы скрыть его. Как только div не исчезает с экрана, мы прекращаем работу. Таким образом экономится время от перебора всего списка.
http://jsfiddle.net/kkv3h/2/
//track whether user has scrolled up or down
var prevScrollTop = $(document).scrollTop();
$(document).scroll(function() {
var currentScrollTop = $(this).scrollTop();
if (currentScrollTop > prevScrollTop) {
//down
var lasthiddenbox = $('.fadeboxhidden:last');
var nextbox = (lasthiddenbox.length > 0) ? lasthiddenbox.next('.fadebox') : $('.fadebox:first');
while (nextbox.length) {
console.log('box: ' + nextbox.offset().top + ' scroll: ' + currentScrollTop);
if (nextbox.offset().top < currentScrollTop) {
nextbox.animate({ opacity: 0 }, 3000).addClass('fadeboxhidden');
}
else { return; }
nextbox = nextbox.next('.fadebox:first');
}
} else {
//up
}
prevScrollTop = currentScrollTop ;
});
//create an object to hold a list of box top locations
var boxtops = new Object;
//gather all boxes and store their top location
$('.fadebox').each( function(index) {
//you may want to dynamically generate div ids here based on index. I didn't do this
//because i was already using the id for positioning.
var divid = $(this).prop('id');
boxtops[divid] = $(this).offset().top;
//console.log(boxtops[divid]);
});