jQueryを使用して固定オブジェクトがフッターと重ならないようにするにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-11-11 17:09:02

オリジナル

468 人が閲覧しました

How to Prevent Fixed Objects from Overlapping the Footer Using 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 サイトの他の関連記事を参照してください。