滚动时将标题粘贴和替换到窗口顶部

Question

在我正在进行的项目中，我有许多带有照片的 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 的照片库时，您会看到同样的效果，因为新的部分标签会将以前的标签推开。

我猜这意味着每次新标签向上滚动到顶部时，我都必须向上调整stuckToTop标签的位置，最终替换它？

谢谢！

Answer 1

我建议，对于固定滚动标题，观看 Remy Sharp's jQuery for Designers video-cast (Demo here)，尽管他将其与 iPhone 的联系人菜单进行比较，而不是 Picasa，但两者听起来很相似。

我认为他的教程解决了你的两个问题。