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

固定オブジェクトとフッターの重複を避ける

多くの Web 開発者は、固定オブジェクトがフッター上でスクロールする問題に遭遇します。これは、共有ボックス、ナビゲーション メニュー、ソーシャル メディア ウィジェットなどの要素で特に一般的です。この重複を防ぐために、jQuery を使用して簡単なソリューションを実装できます。

次の HTML 構造を検討してください:

<div>

CSS:

#social-float {
    position: fixed;
    bottom: 10px;
    left: 10px;
    /* Other styles... */
}

共有ボックスがフッターに達しない限り固定されるようにするには、jQuery を使用してスクロール時の位置を監視します:

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

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

このソリューションは、共有ボックスとフッターの間の距離を計算し、それが 10 ピクセル以内であれば、ボックスの位置を絶対位置に変更します。上にスクロールすると、固定位置が復元されます。

このソリューションを効果的に機能させるには、#social-float の親要素をフッターの兄弟として持つことを忘れないでください。あなたの Web サイトにこの修正を実装して頑張ってください!

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