jQuery：一定の位置までスクロールしたらメニューをfixedさせる

サンプルはこちら。

See the Pen xqhkg by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

左のメニューが画面上部に来た時点でposition:fixedになり、画面内に常に表示されるようになります。

HTML

<div id="navigation">
  <ul>
    <li><a href="">menu1</a></li>
    ～
  </ul>
</div>

前提として、メニュー部分は「#navigation」として構成されています。

JavaScript

$(function(){
  var fix    = $("#navigation");             //メニューオブジェクトを格納
  var fixTop = fix.offset().top;             //メニューの縦座標を格納
  $(window).scroll(function () {             //スクロールが発生したら開始
    if($(window).scrollTop() >= fixTop) {    //スクロール時の縦座標がメニューの縦座標以上なら…
      fix.css("position","fixed");           //メニューに position:fixed 付与
      fix.css("top","0");                    //メニューに top:0 付与
    } else {
      fix.css("position","");                //メニューの position を空に
      fix.css("top","");                     //メニューの top を空に
    }
  });
});

２行目、３行目はコードをコンパクトにするための値の格納なのですが、2行目でまずオブジェクトを格納しています。
次に3行目では「fix.offset().top」で、画面上部からメニューまでの縦座標を取得しています。

4行目の「$(window).scroll」で、画面内でスクロールが発生した際の処理に入ります。

5行目のif文で、「スクロール時の縦座標がメニューの縦座標より多い場合」という分岐を行っています。
サンプルの場合、メニューの縦座標は50pxです。スクロールが50px以上発生した場合、メニューに「position:fixed」と「top:0」をかけています。それにより画面内に常に固定されて表示されています。

if文に合致しないelseの場合、positionとtopを空にすることで元の位置に戻ります。