スクロール量でヘッダーなどの要素を固定するやつ

がんばれ

Html

<div id="oya">
<div id="ko">
<nav>
<ul>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
</ul>
</nav>
</div>
</div>

Script

// ページの読み込みが完全に完了したら以下の処理を実行
window.onload = function() {

  // 「#ko」を固定/解除するための基準となる値を取得し、変数「ko」に代入
  var ko = $("#ko").offset().top;

  // 画面がスクロールされたら以下の処理を実行
  $(window).scroll(function() {

    // ScrollTopの位置が「ko」よりも値が大きければ、「#ko」を固定し、
    // 記事部分のブロック要素の位置を「#ko」の高さ分だけ下げる
    if($(window).scrollTop() > ko) {

      $("#ko").css({"position": "fixed", "top": "0"});
      $("#oya").css({"position": "relative", "top":"50px"});

    // 小さければ、「#ko」の固定を解除し、
    // 記事部分のブロック要素の位置を元に戻す
    } else {

      $("#ko").css("position", "static");
      $("#oya").css({"position": "relative", "top": 0});

    }

  });

}