垂直スクロール時に画面上部に 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 サイトの他の関連記事を参照してください。