スクロール時に画面の上部に Div を固定しておくにはどうすればよいですか?

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

画面の上部に一度固定される div を作成するにはスクロールされると、CSS のposition プロパティを利用できます。次の CSS スニペットを考えてみましょう:

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

編集:

要素が適切に固定されるようにするには、最初にその位置を絶対に設定する必要があります。ドキュメントのスクロール オフセットが要素の上部境界に達すると、その位置を動的に変更して固定し、上部プロパティを 0 にリセットできます。

次の JavaScript コード スニペットは、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 サイトの他の関連記事を参照してください。