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

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 的照片库时，您会看到同样的效果，因为新的部分标签将以前的部分标签推开。

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

谢谢！

Answer 1

我建议，对于固定滚动标题，观看 Remy Sharp 的 jQuery for Designers 视频（此处演示），尽管他将其与 iPhone 的联系人菜单进行了比较，而不是比 Picasa 强，但两者听起来很相似。

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