在我正在进行的元素中,我有许多带有照片的 div,每个 div 都有一个标签,其中列出了其中照片的 YYYY/MM/DD。
<div class="photoCollection">
<div class="label">
2010-12-24
</div>
<div class="photos">
<img>
...
<img>
</div>
</div>
我试图实现的功能是在您滚动浏览时将当前 div 的标签粘贴到窗口顶部,以便您知道您正在查看哪些照片。当滚动浏览下一个照片 div 时,此标签会在到达窗口顶部时替换卡住的标签。
1)我正在努力寻找有效的方法来检测标签何时位于窗口顶部。我不喜欢以下内容,因为查看每个标签似乎有点矫枉过正(“stuckToTop”类为标签添加了固定定位)。
$('.label').each(function()
{
if ( $(this).offset().top < $(window.)scrollTop() )
{
$(this).addClass('stuckToTop');
}
我也尝试过:
$('.label').filter(function()
{
return $(this).offset().top < $(window.)scrollTop;
}).addClass('stuckToTop');
对于更优雅的方法有什么建议吗?
2)我还希望新标签在页面向上滚动时将先前卡住的标签向上推。当您滚动浏览 Picasa 的照片库时,您会看到同样的效果,因为新的部分标签将以前的部分标签推开。
我猜这意味着每次新标签向顶部滚动时我都必须向上调整 StickToTop 标签的位置,最终替换它?
谢谢!
最佳答案
我建议,对于固定滚动标题,观看 Remy Sharp's jQuery for Designers video-cast ( Demo here ),尽管他将其与 iPhone 的联系人菜单而不是 Picasa 进行比较,但这两者听起来足够相似。
我认为他的教程解决了您的两个问题。
关于jquery - 滚动时将标题粘贴并替换到窗口顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4527364/