今回、参考にさせていただいた記事は以下になります。

ページスクロール時に特定ボックスにclassを付与する

たまにヘッダーが変形するタイプのウェブサイトってありますよね。例えば、デモページのように、縦にスクロールさせるとヘッダーの底辺がウィンドウから見切れる時点で、ヘッダーが上部に固定されて背景色やレイアウトが変化するようなタイプです。
scroll_addclass01

このデモページの場合は、ヘッダーの底辺が画面から見切れるスクロール量になった際に、#header.scrollを付与し、それをCSSで調整させてます。

スクロールが#headerの底辺に到達する前

<div id="header">

スクロールが#headerの底辺に到達した後

<div id="header" class="scroll">

という感じ。デモで記述しているHTMLのコードは以下になります。

<div id="header">
<div id="header-inner">
	<h1 id="logo">ロゴ</h1>
	<ul>
		<li>メニュー1</li>
		<li>メニュー2</li>
		<li>メニュー3</li>
	</ul>
</div>
</div>

<div style="height:1200px; background:#efefef;"></div> 

続いてCSS。

/* .scroll 付与前 */
#header {
	width: 100%;
	height: 100px;
	margin: 0 auto;
}
#header #header-inner {
	z-index: 100;
	width: 100%;
	height: 80px;
	margin: 0 auto;
	padding: 10px 0;
	background: #fff;
}
/* .scroll 付与後 */
#header.scroll #header-inner {
	position: fixed;
	height: auto;
	background: #9ff;
}
#header.scroll #logo,
#header.scroll ul,
#header.scroll li {
 display: inline-block;
}

.scrollが付与されたら、#header-innerを上部固定&背景色を変化、ロゴやメニューをインラインブロックに変化させて横並びにさせるようにしています。

次にjQueryの記述。jQuery本体を読み込んだ後に以下スクリプトを記述します。

<script>
$(function(){
 var header = $('#header')
 header_offset = header.offset();
 header_height = header.height();
  $(window).scroll(function () {
   if($(window).scrollTop() > header_offset.top + header_height) {
    header.addClass('scroll');
   }else {
    header.removeClass('scroll');
   }
  });
});
</script>

上記スクリプトの概要は以下。

3行目
対象となるブロックを指定。今回は#headerですね。
4行目の.offset()
3行目で指定した対象(#header)の位置を取得します。
5行目の.height()
3行目で指定した対象(#header)の高さを取得します。
7行目の.scrollTop()
ウィンドウ上辺からのスクロール量を取得します。
8行目の.addClass(‘scroll’)
3行目で指定した対象(#header)に、カッコ内のクラス(scroll)を追加します。
10行目の.removeClass(‘scroll’)
3行目で指定した対象(#header)から、カッコ内のクラス(scroll)を外します。

で、offset.topとheightの合計よりスクロール量が大きい場合は、#header.scrollを付与、小さい場合は.scrollを外す、という流れです。これを応用すれば、様々なボックスをスクロールに応じて動かしたり固定させたりできますね。