DIV 要素をスクロール上に固定するにはどうすればよいですか?

スクロール時に DIV を固定して配置する方法

このクエリは、画面上の特定の点までスクロールした後も div を固定したままにする方法を検討します。ページ。このアイデアは、9gag などの Web サイトで 2 番目の広告と同様の効果を作成することです。この効果は、特定のポイントを超えて下にスクロールすると固定されて表示されます。

現時点では CSS 単独では解決策が提供されませんが、CSS と CSS を組み合わせることにより、 JavaScript はこの効果を実現できます。

jQuery アプローチを使用します:

var fixmeTop = $('.fixme').offset().top;
$(window).scroll(function() {
  var currentScroll = $(window).scrollTop();
  if (currentScroll >= fixmeTop) {
    $('.fixme').css({
      position: 'fixed',
      top: '0',
      left: '0'
    });
  } else {
    $('.fixme').css({
      position: 'static'
    });
  }
});

このコードでは、fixme は次の DIV を表します。位置が固定されること。このアプローチでは、スクロール位置を追跡し、それを DIV の初期位置と比較するイベント リスナーを追加します。スクロール位置が DIV の初期位置を超えると、CSS プロパティのposition、top、left が設定され、DIV が所定の位置に固定されます。それ以外の場合、CSS プロパティの位置は静的に設定され、DIV が通常どおりスクロールできるようになります。

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