ページをスクロールすると、ロゴ部分まではスクロールし、メニューのみになったところでスクロールが固定になり、そのままコンテンツ部分がヘッダーの下に隠れていくページを見たことがあるだろう。

サンプルページ

一見複雑そうに見えるが、jqueryを使うと割と簡単なjavascriptとcssで実現可能。

まずはjqueryを読み込む

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

一定の範囲スクロールしたらfixedのクラスを付加してスクロールを固定化するjavascriptを読み込む

JAVASCRIPT

<script>
$(function(){
	var box = $("#menu");
	var boxTop = box.offset().top;
	$(window).scroll(function(){
		if($(window).scrollTop() >= boxTop){
			box.addClass("fixed");
			$("body").css("margin-top","40px");
		}else{
			box.removeClass("fixed");
			$("body").css("margin-top","0px");
		}
	});
});
</script>

スタイルシートも割と単純

CSS

<style>
body {
	margin: 0px;
	font-size:13px;
	line-height:1.5;
	font-family:'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
#header {
	height: 80px;
	text-align:center;
	background-color:#eee;
}
#menu {
	width: 100%;
	height: 40px;
	text-align:center;
	background-color:#fff;
	box-shadow: 0px 5px 5px rgba(0,0,0,0.2);
}
.fixed {
	position: fixed;
	top: 0px;
	z-index: 9999;
}
#contents {
	margin: 20px auto 0px auto;
	width:290px;
}
</style>

box-shadow: 0px 5px 5px rgba(0,0,0,0.2);

はコンテンツが潜り込む境界線にシャドウを落として自然に見せているが、不要なら削除するといい。

background-color:#fff;

は#menuに背景画像または背景色を設定しないと、潜り込んだコンテンツが透けて見えてしまうから注意。

body内も簡単。
以下のコーディングでheaderまでがスクロールしたところで固定となりmenuの下にcontentsが入っていく。

HTML

<div id="header">
	ヘッダー
</div><!-- header -->

<div id="menu">
	メニュー
</div><!-- menu -->

<div id="contents">
	コンテンツ本文
</div><!-- contents -->