スクロール時にページの先頭に Div を「貼り付ける」方法

垂直スクロール時に画面上部に Div を配置します

質問:

どうすれば作成できますかユーザーが Web ページをスクロールしたときに、Web ページの上部に div が「貼り付く」のですか?ページの先頭に戻った後、div を元の位置に戻したいと思います。

解決策:

この機能の鍵は、位置を設定することです。 div は、ユーザーがスクロールして通過した後にのみ表示されます。これを実現するには、window.scroll イベントにアタッチされたハンドラーを使用します。

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

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

このコードは、ページがスクロールして通過したときに div にスティッキー CSS クラスを追加し、ページが戻ったときにそのクラスを削除します。頂上へ。 CSS クラスは次のように定義されます:

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

sticky クラスが追加されると、div は固定位置を想定し、画面の上部に残ります。クラスが削除されると、元の位置に戻ります。

注: コードは、パフォーマンスを向上させるために jQuery オブジェクトをキャッシュするように最適化されています。

以上がスクロール時にページの先頭に Div を「貼り付ける」方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。