スクロール中に画面の上部に Div を貼り付けるにはどうすればよいですか?

スクロール中に画面の上部に Div を維持する

特定のシナリオでは、Div を画面の上部に固定することが望ましいユーザーが下にスクロールして画面を通過すると、ユーザーが Web ページをナビゲートするときに事実上「フォロー」されます。この動作により、ボタンやナビゲーション コントロールなどの重要な要素にすぐにアクセスできるようになります。

この効果を実現するには、次の戦略を採用できます:

JavaScript コード:

<code class="js">// Cache jQuery objects for performance optimization.
var $window = $(window),
    $stickyEl = $('#the-sticky-div'),
    elTop = $stickyEl.offset().top;

// Attach a handler to the window's scroll event.
$window.scroll(function() {
    // Determine if the div has been scrolled past.
    if ($window.scrollTop() > elTop) {
        // Add a CSS class to make the div sticky.
        $stickyEl.addClass('sticky');
    } else {
        // Remove the sticky class when the user scrolls back up.
        $stickyEl.removeClass('sticky');
    }
});</code>

CSS クラス:

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

説明:

JavaScript コードは、最初に jQuery オブジェクトをキャッシュします。より良いパフォーマンス。次に、スクロール イベント リスナーをウィンドウに追加します。これは、ユーザーが垂直にスクロールするたびにトリガーされます。リスナー内では、ウィンドウのスクロール位置とページの上部からの div のオフセットを比較することにより、div がスクロールされたかどうかをチェックします。スクロール位置がオフセットより大きい場合、スティッキー CSS クラスが div に追加され、その位置が固定に設定され、画面の上部に配置されます。逆に、ユーザーが上にスクロールし、スクロール位置がオフセットより小さい場合、スティッキー クラスは削除され、div は元の位置に戻ります。

以上がスクロール中に画面の上部に Div を貼り付けるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。