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

スクロール中に画面の上部に Div を固定する

スクロール後に画面の上部に固定されたままになる Div を作成する特定のスクロールしきい値は、CSS または JavaScript を使用して達成できます。

CSS解決策

CSS を使用すると、div の上端が画面の上部に達したら固定として配置できます。

.fixed-div {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

JavaScript 解決策

JavaScript を使用すると、スクロール位置が特定の位置に達したときに div の位置を動的に変更できます。 value:

$(window).scroll(function(e) {
    var $div = $('.fixed-div');
    var scrollTop = $(this).scrollTop();
    if (scrollTop > 200) {
        $div.css('position', 'fixed');
        $div.css('top', '0');
    } else {
        $div.css('position', 'static');
        $div.css('top', '0');
    }
});

このスクリプトでは、jQueryscroll() 関数を使用してスクロール イベントをリッスンします。 scrollTop の位置が 200 を超えると、div には固定位置が与えられ、ページの先頭に設定されます。 scrollTop が 200 を下回ると、div は静的な位置に戻ります。

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