固定オブジェクトがフッターと重ならないようにするにはどうすればよいですか?

ページ フッターでの固定オブジェクトの修正

フッター上をスクロールする固定オブジェクトの一般的な問題には、簡単な解決策があります。たとえば、画面の左下隅にある固定の「共有」ボックスを考えてみましょう。フッターと重ならないように、フッターの約 10 ピクセル上で停止します。

まず、ページがスクロールされるたびに、ボックスがフッターにどれだけ近いかを判断する必要があります。

$(document).scroll(function() {
    checkOffset();
});

ボックスがフッターに近づきすぎる場合 (つまり、10 ピクセル以内)、その位置を絶対位置に変更します。

function checkOffset() {
    if($('#social-float').offset().top + $('#social-float').height() 
                                           >= $('#footer').offset().top - 10)
        $('#social-float').css('position', 'absolute');
    if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
        $('#social-float').css('position', 'fixed'); // restore when you scroll up
}

#social-float の親はHTML 構造内のフッターの兄弟。

以上が固定オブジェクトがフッターと重ならないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。