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

スクロールして通過するときに Div を画面の上部に固定しておく方法

問題:

最初はページの上部から 100 ピクセルの位置にあり、重要なボタンまたはコントロールが含まれる div。ユーザーがこの div を下にスクロールしたときに、簡単にアクセスできるように、この div を画面の上部に「貼り付ける」必要があります。ユーザーが上にスクロールしたときに、元の位置に戻るようにします。

解決策:

その秘密は、position:fixed プロパティを使用することにあります。ユーザーが div を超えてスクロールしました。これを実現する方法は次のとおりです。

JavaScript:

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

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

このコードは、ウィンドウのスクロール イベントをキャプチャし、ユーザーがスクロールしたときに「スティッキー」CSS クラスを動的に適用します。 div の上部

CSS:

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

この CSS は、div が画面の上部に固定されるように「sticky」クラスを設定します。デフォルトでは、position:fixed はウィンドウを基準にして div を配置し、スクロール中ずっと先頭に位置するようにします。

仕組み:

ページが読み込まれると、 div は上から 100 ピクセルの位置にあります。ユーザーが下にスクロールすると、JavaScript は現在のスクロール位置が div の最初の上部位置を超えているかどうかを確認します。その場合、「sticky」クラスを div に適用し、画面の上部に固定されます。ユーザーが上にスクロールすると、プロセスが逆になり、「スティッキー」クラスが削除され、div が最初の位置に戻ることができるようになります。

要約すると、このソリューションは効果的に div をクラスに「くっつける」ことになります。ユーザーがスクロールして通過すると画面の上部に表示され、ユーザーが上にスクロールすると元の位置に戻ることができます。

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