选择接触视口顶部边缘的元素的有效方法

Question

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

请参阅附图。选择绿色元素是因为它们接触顶部边缘。

更新

我将如何使用它的一个示例是淡入淡出正在消失的元素-屏幕。页面上可能有数百个。想象一下像 Pinterest 这样的页面。以滚动事件的速率计算数百个偏移量和滚动顶部，即使受到限制仍然感觉效率很低。

Answer 1

这就是我想出来的。我认为可以通过缓存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]);    
});

Answer 2

我认为最好的方法是您可以通过某个类标记您想要确定命中测试的元素，例如“命中测试可见”或其他内容。然后，对于这些元素，在滚动事件上，您应该能够找到它们相对于文档的偏移量 - 请参阅 jQuery offset，然后根据滚动值，如果偏移量小于滚动值，并且偏移量+元素高度大于滚动偏移量，则该元素应该“触及”顶部边缘。