メイン画像の下にあるグローバルナビや、コンテンツ内にあるローカルナビをスクロールでページ上部に来た時に固定する方法をご紹介します。

画面上部でナビを固定する方法

$(function() {
	var offset = $('#globalNavi').offset();
	 
	$(window).scroll(function () {
		if ($(window).scrollTop() > offset.top) {
			$('#globalNavi').addClass('fixed');
		} else {
			$('#globalNavi').removeClass('fixed');
		}
	});
});

実装結果

参考元はこちら
Wataame Frogさん

ちなみに、offset()とは

offset()とは、要素の表示位置を、documentを基準にした現在の座標で取得・設定できるメソッドになります。
※documentを基準にした座標なので、コンテンツ幅内での座標とは異なる。

また、戻り値を設定することで要素の位置を設定することができます。
※要素が非表示の場合は正しく位置を取得できなかったり、border、margin、paddingを考慮しない位置を設定するので気をつけましょう。

他にもあるよ。関連記事

• HTMLのtableの文字サイズがiphoneだと大きくなる
• 【CSS】テキストの末尾を3点リーダーにする方法
• 【CSS】hoverで表示される吹き出し（ツールチップ）の作り方