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

Question

我有如下代码:

<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中寻找解决方案,但似乎无法找到一个.有人有主意吗？

谢谢

标记

Answer 1

如果你的元素高度不同,你可以在滚动上迭代它们:

$(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().

Answer 2

这是另一种基于内置 javascipt 函数的想法。

\n\n

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

\n\n

这段代码不是现成的产品 \xe2\x80\x94 它只是一个示例，仅适用于 webkit 浏览器。如果你想使用它，你应该在谷歌上搜索caretRangeFromPoint()的跨浏览器等效项

\n