Div をスクロール上に固定する方法: 固定位置とイベント処理のガイド?

スティッキー Div: スクロール時に画面上部に張り付く

重要なボタンやコントロールを備えたページ上部近くに div が配置されていると想像してください。ユーザーが垂直にスクロールすると、この div が画面の上部にくっついて追従するようにします。先頭に戻ると、元の場所に戻る必要があります。

解決策

この動作を実現するための鍵は、ユーザーがビューポートをスクロールして通過した後にのみ div を「固定」にすることです。これには、CSS 位置を固定に設定することが含まれます。実装方法は次のとおりです。

<code class="javascript">// Cache jQuery objects for efficiency.
const $window = $(window);
const $stickyEl = $('#the-sticky-div');
const elTop = $stickyEl.offset().top;

$window.scroll(function() {
    $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
});</code>

このコードは、ウィンドウのスクロール イベントにイベント ハンドラーをアタッチします。トリガーされると、現在のスクロール位置が elTop (上からの div の初期オフセット) を超えているかどうかがチェックされます。 true の場合、sticky という名前の CSS クラスが div に追加され、画面の上部に固定されます。それ以外の場合は、クラスが削除され、div が元の位置に戻れるようになります。

対応する CSS クラス定義は次のようになります:

<code class="css">#the-sticky-div.sticky {
    position: fixed;
    top: 0;
}</code>

以上がDiv をスクロール上に固定する方法: 固定位置とイベント処理のガイド?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。