我有如下代码:
<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().