Question

我的代码如下：

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

但实际上有很多很多关于class ='item'的东西。

基本上，当用户滚动这个很长的项目列表时，我想要更改当前顶部可见项目的样式（如Google阅读器！）。在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函数的想法。

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浏览器。如果你想使用它，你应该google浏览器等效的 caretRangeFromPoint（）

Answer 3

您可以使用javascript创建自己的滚动条。

这不是很实际的想法，但你可以试试。

并将链接放置在更好地描述它的图像上。它非常实用。

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

3 个答案: