[解決済み] divを越えて下にスクロールした場合、画面上部に固着するようにする [重複].

質問

私は、ページが最初にロードされたとき、上から約100pxにあるdivを持っています（それはページのためのいくつかのボタンなどを保持します）。

ユーザーがスクロールして通過するとき、div が画面の上部に取り付けられるように、ユーザーに "follow"させたいと考えています。ユーザーがページのトップに戻ったとき、元の位置に戻したいのです。

Visualization - xxxxx is the div:

Default (page load)          User vertically scrolled well past it
---------                    ---------
|       |                    |xxxxxxx| < after div reaches top of screen when
|xxxxxxx|                    |       |   page is scrolled vertically, it stays
|       |                    |       |   there
---------                    ---------

どのように解決するのですか？

コツは、position:fixedとして、ユーザーがスクロールして通り過ぎた後でないと設定できないことです。

これは次のような方法で行います。window.scrollイベントにハンドラをアタッチします。

   // Cache selectors outside callback for performance. 
   var $window = $(window),
       $stickyEl = $('#the-sticky-div'),
       elTop = $stickyEl.offset().top;

   $window.scroll(function() {
        $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
    });

これは単に sticky CSS クラスを追加し、ページがスクロールしてそれを通り過ぎたときにそのクラスを削除します。

そして、CSSクラスは次のようになります。

  #the-sticky-div.sticky {
     position: fixed;
     top: 0;
  }

EDIT- jQueryのオブジェクトをキャッシュするようにコードを修正しました。