Jquery / Javascript在滚动后找到第一个可见元素

我有如下代码：

<div id="container">
<div class="item" id="1">blah blah</div>
<div class="item" id="2">blah blah 2</div>
</div>

但实际上有很多很多与class =’item’.

基本上,当用户滚动这个很长的项目列表时,我想更改当前顶部可见的样式(如谷歌阅读器！).在jquery或简单的javascript中查找了解决方案,但似乎找不到.任何人都有什么想法？

谢谢

标记

解决方法

如果你的元素的高度不一样,你可以在滚动条上迭代：

$(document).scroll(function() {
    var cutoff = $(window).scrollTop();
    $('.item').removeClass('top').each(function() {
        if ($(this).offset().top > cutoff) {
            $(this).addClass('top');
            return false; // stops the iteration after the first one on screen
        }
    });
});

如果这太慢,可以将$(‘.item’).offset()缓存到数组中,而不是每次调用offset().