选择触及视口上边缘的元素的有效方法

Question

当页面滚动时，选择触及浏览器窗口视口上边缘的元素的计算效率是多少？

见附图。选择绿色元素是因为它们触及顶部边缘。

更新

我将如何使用它的一个例子是淡化屏幕外的元素。页面上可能有数百个。想象一下像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]);    
});

Answer 2

我认为最好的方法是你可以用某个类来标记你想要确定命中测试的元素，比如说“命中测试 - 可见”等等。然后，对于这些元素，在scroll事件中，您应该能够找到与文档相比的偏移量 - 请参阅jQuery offset，然后根据滚动值，如果偏移小于滚动，则offset +元素高度大于滚动偏移量，则元素应“触摸”上边缘。