☰

スクロールしたらdivを画面上部に固定するにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript jquery css scroll positioning
スクロールしたらdivを画面上部に固定するにはどうすればいいですか? 質問する

コンテンツ ブロックの下に配置される div を作成したいと思います。ただし、ページがスクロールされて上部の境界に接触すると、その位置に固定され、ページとともにスクロールします。

ベストアンサー1

単純にCSSを使用して、要素を次のように配置することができます。修理済み:

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

編集:要素の位置を絶対値に設定し、スクロール オフセットが要素に到達したら、それを固定に変更し、上部の位置を 0 に設定する必要があります。

ドキュメントの上部スクロールオフセットを検出するには、スクロールトップ関数：

$(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 に達すると、要素は固定として配置されるため、ブラウザー ウィンドウの上部に固定されます。

おすすめ記事