3

これに似たものを複製しようとしています。

下にスクロールすると、divposition: fixedは特定のポイントに到達するまでスクロールし ( )、そこで停止します ( position: absolute)。下にスクロールし続けると、上に250pxスクロールして選択するまで、ページ上のその位置を保持します ( )。再びバックアップします。

私がこれまでに持っているもの。

現在、私のフィドルは、「ドロップオフ」された位置を保持せず、元の位置に戻ることを除いてすべてを実行します。

アイデア？

4

2 に答える 2

1

ウィンドウの scrollTop 値を計算し、それを top の値として適用し、位置を絶対に設定する必要があります。

$('element').css({
    'top': $(window).scrollTop(),
    'position': 'absolute'
});

スクロールを続けると、scrollTop の値が変化するため、これは 1 回だけ行う必要があります。変数を使用して、要素の状態を追跡します。私が知る限り、次の 3 つがあります。

  1. 相対的
  2. 修理済み
  3. 絶対の

この変数を使用すると、必要なときにのみクラスを設定することで、ブラウザーの負荷を軽減することもできます。例えば：

if( y > 100 && pos != 'fixed' ){

    pos = 'fixed';

    $('element').addClass('fixed');

}else if( y > 100 && pos != 'relative' ){

    pos = 'relative';

    $('element').addClass('relative');

}

それが役立つことを願っています:)

于 2012-06-06T15:31:48.860 に答える
0

次の変更を行いました。

if (y >= socialTop & y <= 150) {
    $('#static-social').addClass('fixed');
} else {
    $('#static-social').removeClass('fixed');
}

に：

if (y >= socialTop & y <= 150) {
    $('#static-social').css('marginTop', $(this).scrollTop());
}

これにより、ウィンドウの位置に基づいて要素がページの上部にとどまることが保証されたため、上にスクロールすると、要素は元の場所に残されます。

于 2012-06-06T15:26:12.740 に答える