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

我有如下代码：

 
blah blah
 
blah blah 2
  

但实际上有很多很多与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浏览器。 如果你想使用它，你应该谷歌搜索caretRangeFromPoint（）的跨浏览器等价物

Answer 3

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

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

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