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

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

Web ページ上に要素を配置すると、ユーザー エクスペリエンスと構成が向上します。一般的なシナリオの 1 つは、特定のスクロール ポイントに到達したときに div を画面の上部に固定することです。

これを実現するには、複数のアプローチがあり、そのうちの 1 つは CSS のみを使用することです。要素の位置を固定に設定すると、

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

にスクロールした後も、要素は画面の上部に固定されたままになります。ただし、このアプローチでは、要素が最初に絶対に配置されていることを前提としています。希望のスクロール オフセットが満たされたら、その位置を固定に変更し、一番上のプロパティをゼロにリセットする必要があります。スクロール オフセットを決定するには、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 ピクセルに達すると、要素は上部の固定位置に遷移します。画面の。オフセットが 200 ピクセルを下回ると、要素は前の位置に戻ります。この手法により、ユーザーがページをスクロールするときに div をスムーズに移行できます。

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