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

過去にスクロールしたときに画面上部に Div を固定する

インタラクティブな Web ページを開発しているとき、多くの場合、ユーザーの操作に従う要素を用意することが望ましいです。特に特定のセクションに到達した場合はスクロールします。このようなシナリオの 1 つは、ページの上部近くに配置された div を含みますが、スクロールされて通過すると画面に「張り付く」必要があります。

解決策

この効果を実現するには、創造的な組み合わせが必要です。 JavaScriptとCSSを採用しています。 Position:fixed スタイルは div に適用されますが、それはユーザーがスクロールして通過した後にのみ適用されます。

これを実現する方法は次のとおりです:

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

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

この JavaScript コードは、イベント ハンドラーを div に追加します。 window.scroll イベント。スクロール位置を監視します。スクロールが div (elTop) の初期位置を超えると、「スティッキー」CSS クラスがそれに追加されます。このクラスには次の CSS スタイルが含まれています:

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

その結果、div は固定位置を想定し、スクロールされている限りページの先頭に留まります。ユーザーが一番上までスクロールして戻ると、スティッキー クラスが削除され、div が元の位置に戻ります。

このソリューションは、JavaScript と CSS の力を組み合わせて、応答性の高いユーザー フレンドリーなエクスペリエンスを作成します。ページのスクロール位置に関係なく、重要な要素を手の届くところに表示します。

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