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

Patricia Arquette
リリース: 2024-11-03 21:03:03
オリジナル
215 人が閲覧しました

How to Make a 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート