[解決済み] 一度スクロールしたdivを画面の一番上に張り付けるにはどうしたらいいですか？

質問

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

解決方法は？

単純にCSSを使用して、要素の位置を 固定 :

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

編集する 要素の位置は絶対で、スクロールオフセットが要素に到達したら、固定に変更し、トップポジションをゼロに設定する必要があります。

ドキュメントのトップスクロールオフセットは スクロールトップ 関数を使用します。

$(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になったとき、この要素は スティック がブラウザウィンドウの上部に固定されているためです。