スクロールするとグローバルナビゲーションが上部で固定される動きの実装方法

スクロールさせると、グローバルナビゲーションが上部で固定される動きを実装する方法です。
初心者のかたが読んでもわかるようにできる限り細分化して解説していますが、うまく実装できなければコメントください。

どんな動作か確認したいかたは、まずはデモをご覧ください。

コピペだけで実装できる

HTML

<header>ヘッダー</header>
<nav>ナビゲーション</nav>
<main>コンテンツ</main>
<footer>フッター</footer>

CSS

body {
	margin: 0;
}
header {
	padding: 3em 0;
	text-align: center;
	color: #fff;
	background-color: #000;
}
nav {
	padding: 3em 0;
	text-align: center;
	color: #fff;
	background-color: #444;
}
main {
	height: 2000px;
	text-align: center;
	background-color: #fff;
}
footer {
	padding: 3em 0;
	text-align: center;
	color: #fff;
	background-color: #000;
}
.is-fixed {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
}

JavaScript

$(function() {
	var navHeight = $('nav').outerHeight(),
		navPos = $('nav').offset().top;
	$(window).on('load scroll', function() {
		var scrollPos = $(this).scrollTop();
		if ( scrollPos > navPos ) {
			$('nav').addClass('is-fixed');
			$('main').css('margin-top', navHeight);
		} else {
			$('nav').removeClass('is-fixed');
			$('main').css('margin-top', '0');
		}
	});
});

誰でもわかる詳しい解説

JavaScript

まず、JavaScriptの2行目-3行目では、変数の宣言と初期化をしています。
2行目は、jQueryの.outerHeight()をつかって、nav要素の高さを取得して、navHeightに代入しています。

navHeight = $nav.outerHeight(),

3行目は、jQueryの.offset().topをつかって、nav要素のドキュメントの左上からのy軸方向の距離を取得して、navPosに代入しています。

navPos = $nav.offset().top,

4行目は、ページ読み込み完了時とスクロールしたときに動かすというように書いています。

$(window).on('load scroll', function() {

5行目は、ブラウザの画面をスクロールした時の位置（スクロール量）を取得して、scrollPosに代入しています。

var scrollPos = $(this).scrollTop();

6行目は、「3行目で取得したnav要素の位置と5行目で取得したスクロール位置とを比較して、スクロール位置が大きければ」という条件文です。

if ( scrollPos > navPos ) {

7行目-8行目で、上記条件に一致する場合の動作として、nav要素にクラス名を付与し、main要素にcssでmargin-topを付与するというように書いています。

$('nav').addClass('is-fixed');
$('main').css('margin-top', navHeight);

9行目は、「上記条件以外の場合」と書いて、10行目-11行目で、nav要素からクラス名を削除し、main要素のmargin-topを”0″にするということです。

$('nav').removeClass('is-fixed');
$('main').css('margin-top', '0');