Question

在我正在进行的项目中，我有许多带照片的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，但两者听起来相似。

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

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

1 个答案: