javascript - 选择接触视口(viewport)顶部边缘的元素的有效方法

Question

当页面滚动时，选择接触浏览器窗口视口(viewport)顶部边缘的元素的计算效率高的方法是什么？

见附图。绿色元素被选中是因为它们接触到顶部边缘。

更新

我将如何使用它的一个例子是淡出屏幕外的元素。页面上可能有数百个。想象一下像 Pinterest 这样的页面。以滚动事件的速率计算数百个它们的偏移量和 scrollTop，即使节流仍然感觉效率很低。

Answer 1

这是我想出来的。我认为可以通过缓存 scrollTop 值来改进它，但这非常好。我已经包含了用于缓存 boxtops 的框架，但没有包含实现代码。我也只实现了向下滚动以隐藏 div。我已将它们重新显示为您的练习。

当窗口滚动时，我们得到最后一个隐藏的 div。我们知道这个 div 之前的所有东西都已经隐藏了。然后使用'while next element is off the screen'隐藏它。只要 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]);    
});