スクロール時に画面の上部に固定するスティッキー Div を作成するにはどうすればよいですか?

画面の上部に固定するスティッキー Div の作成

問題:

最初はコンテンツ ブロックの下に残る div を作成しようとします。ただし、ページを下にスクロールして div の上部境界に到達すると、固定されてページの横にスクロールします。

解決策:

固定位置属性を持つ CSS を採用します。希望を達成する機能:

.fixedElement {
    background-color: #c0c0c0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

編集:

div がスティッキーなままであることを保証するには、最初は絶対位置を指定する必要があります。要素のスクロール オフセットに達すると、位置が固定に変更され、上部の位置が 0 に設定されます。

scrollTop 関数を使用してドキュメントの上部のスクロール オフセットを検出します。

$(window).scroll(function(e) {
    var $el = $('.fixedElement');
    var isPositionFixed = ($el.css('position') == 'fixed');
    if ($(this).scrollTop() > 200 && !isPositionFixed) {
        $el.css({'position': 'fixed', 'top': '0px'});
    }
    if ($(this).scrollTop() < 200 && isPositionFixed) {
        $el.css({'position': 'static', 'top': '0px'});
    }
});

スクロール時オフセットが 200 に達すると、要素は固定され、ブラウザ ウィンドウの上部に固定されます。

以上がスクロール時に画面の上部に固定するスティッキー Div を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。