2

私が取り組んでいるプロジェクトでは、写真を含む多数の 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 ラベルの位置を上に調整し、最終的にそれを置き換える必要があることを意味していると思いますか?

ありがとう！

4

1 に答える 1

4

固定スクロール ヘッダーについては、Remy Sharp の jQuery for Designers ビデオキャスト( Demo here ) を視聴することをお勧めしますが、彼はそれを Picasa ではなく iPhone の連絡先メニューと比較していますが、2 つのサウンドは十分に似ています。

彼のチュートリアルは、あなたの質問の両方のポイントに対処していると思います。

于 2010-12-24T17:01:22.113 に答える