jQuery

jQueryでスクロールするとヘッダーを固定させる

最近よくあるページがスクロールを始めるとヘッダーの位置が固定するjQueryのスクリプトです。
よく使うのでメモがわりに掲載します。
基本は簡単なので覚えておけばいろいろ応用できるかと思います。

デモはこちら

仕組みは、<header>の高さ分（デモでは80px）スクロールすると<nav>にfixedクラスが追加されることで固定されます。

header {
	width: 100%;
	height: 80px;
	color: #333;
	background: #EEE;
}
nav {
	width: 100%;
	color: #FFF;
	background: #333;
}
nav.fixed {
	position: fixed;
	left: 0;
	top: 0;
}

$(function() {
	
	//ロード or スクロールされると実行
	$(window).on('load scroll', function(){
		
		//ヘッダーの高さ分(80px)スクロールするとfixedクラスを追加
		if ($(window).scrollTop() > 80) {
			$('nav').addClass('fixed');
		} else {
			//80px以下だとfixedクラスを削除
			$('nav').removeClass('fixed');
		}
		
	});
	
});

scrollのみだと、スクロールした状態で更新ボタンを押すと固定されないので、loadも追加しています。

-jQuery