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

スクロール時に画面上部に Div を貼り付ける

はじめに:
div を作成したいスクロールしても画面の上部に固定されたままになるのは、一般的な Web デザイン要件です。この機能は、CSS の配置や JavaScript の操作など、さまざまな方法で実現できます。

CSS の配置:
簡単なアプローチは、CSS で固定の配置を使用することです:

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

この CSS を使用すると、スクロールに関係なく、要素は画面に対して同じ位置に留まります。ただし、スクロールされた位置に基づいて要素の位置を動的に変更する必要がある場合、この方法は適切ではない可能性があります。

JavaScript 操作:
上部に固定する div を作成するにはスクロールされた場合にのみ、CSS と JavaScript の組み合わせを使用できます。アイデアは、特定のスクロール オフセットに達したら、要素の位置を絶対位置から固定位置に変更することです。

$(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'});
  } 
});

このコードでは:

• $el はクラスの要素を表します。 'fixedElement'.
• isPositionFixed は、要素がすでに固定されているかどうかを確認します。 Position.
• スクロール オフセット ($(this).scrollTop() で決定) が 200px に達し、要素が固定されていない場合、固定されて上部に配置されるように設定されます。
• スクロール オフセットが 200px を下回り、要素が固定されると、要素は元の位置にリセットされます。

このアプローチは次のことを提供します。スクロール動作に基づいて要素の位置を動的に調整できる柔軟性。

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