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'中有很多

基本上，当用户滚动这个很长的项目列表时，我想改变当前最热门的项目的样式（比如google reader！）。在jquery或纯javascript中寻找解决方案，但似乎找不到。有人有什么想法吗

谢谢

---

标记

您可以使用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（）。

这里还有一个基于内置javascipt函数的想法

var range = document.caretRangeFromPoint(0,0); // screen coordinates of upper-left corner of a scolled area (in this case screen itself)
var element = range.startContainer.parentNode; // this an upper onscreen element

---

这段代码不是现成的产品——它只是一个示例，只在webkit浏览器中有效。如果你想使用它，你应该在谷歌上搜索跨浏览器等价的caretRangeFromPoint（）

谢谢，只需稍加调整，就可以很好地工作，添加25个，这样它们就可以在到达窗口顶部之前被选中，否则选中的一个会在选中下一个之前被半滚动掉$（'.item'）.offset（）将不起作用，因为-offset将获取匹配元素集中第一个元素相对于文档的当前坐标。添加一个实现示例或至少一个实现范例或技术会很有用。更好地描述，例如：你用滚动工具表示什么，你会使用什么库/插件，为什么你不认为它是一个实用的想法，等等？