これに似たものを複製しようとしています。
下にスクロールすると、divposition: fixed
は特定のポイントに到達するまでスクロールし ( )、そこで停止します ( position: absolute
)。下にスクロールし続けると、上に250px
スクロールして選択するまで、ページ上のその位置を保持します ( )。再びバックアップします。
現在、私のフィドルは、「ドロップオフ」された位置を保持せず、元の位置に戻ることを除いてすべてを実行します。
アイデア?
これに似たものを複製しようとしています。
下にスクロールすると、divposition: fixed
は特定のポイントに到達するまでスクロールし ( )、そこで停止します ( position: absolute
)。下にスクロールし続けると、上に250px
スクロールして選択するまで、ページ上のその位置を保持します ( )。再びバックアップします。
現在、私のフィドルは、「ドロップオフ」された位置を保持せず、元の位置に戻ることを除いてすべてを実行します。
アイデア?
ウィンドウの scrollTop 値を計算し、それを top の値として適用し、位置を絶対に設定する必要があります。
$('element').css({
'top': $(window).scrollTop(),
'position': 'absolute'
});
スクロールを続けると、scrollTop の値が変化するため、これは 1 回だけ行う必要があります。変数を使用して、要素の状態を追跡します。私が知る限り、次の 3 つがあります。
この変数を使用すると、必要なときにのみクラスを設定することで、ブラウザーの負荷を軽減することもできます。例えば:
if( y > 100 && pos != 'fixed' ){
pos = 'fixed';
$('element').addClass('fixed');
}else if( y > 100 && pos != 'relative' ){
pos = 'relative';
$('element').addClass('relative');
}
それが役立つことを願っています:)
次の変更を行いました。
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());
}
これにより、ウィンドウの位置に基づいて要素がページの上部にとどまることが保証されたため、上にスクロールすると、要素は元の場所に残されます。