固定位置の要素がフッターと重ならないようにするにはどうすればよいですか?

フッター問題での固定位置の重複を解決する

固定位置要素を含む Web ページをデザインする場合、これらの要素が重なり合うシナリオに遭遇するのが一般的です。ページフッターと重なります。この問題に対処するには、シンプルで効果的な jQuery ソリューションを実装できます。

要素を特定する

提供された HTML コードは、共有ボックス要素 (#social-float) を定義します。 )、CSS は固定の左下隅に配置します。フッター要素 (#footer) には固定の高さがありません。

ページのスクロールを処理します

フッターに対する共有ボックスの位置を監視するには、 jQuery のscroll() メソッドを使用したスクロール イベント ハンドラー。

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

Check Share Box Offset

checkOffset() 関数内で、フッターに対する共有ボックスの垂直オフセットを計算します。オフセットが 10px 未満の場合、つまり共有ボックスがフッターに侵入している場合は、その位置を絶対位置に更新します。

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');

兄弟要素を確認する

共有ボックス (#social-float) の親はフッター (#footer) の兄弟である必要があります。これにより、フッターに対して適切な配置が可能になります。

<div class="social-float-parent">
    <div>

この jQuery ソリューションを実装すると、共有ボックスは所定の位置に固定されたままになりますが、フッターに重なる前に自動的に停止するため、すっきりとした視覚的に魅力的なデザインが保証されます。

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