ページを開いた時にはヘッダーの下部にナビゲーションメニューがあって、スクロールした時にそのまま上がって表示されなくならずに、ページ上部に固定される様にしたい！って時の方法。

今回はjQueryとCSSで再現してみます。

まずはjQueryで動作を制御します。

$(window).scroll(function(){
$(window).scroll(function(){ var st = $(window).scrollTop();
 if(st>100){ $('header nav').addClass("scrolloff") 
} else {
 $('header nav').removeClass("scrolloff") }
});

このコードではスクロールした値を変数「st」に格納したうえで、if分を使い「st」の値が100以上であればnavタグにclass名scrolloffを追加し100以上でなければ、class名scrolloffを削除しています。
このコードでは出来るだけjQueryは簡単にして、CSSを上手に使うようにしています。

ここまでが上手くできていれば、ブラウザで100px以上スクロールすればnavタグにクラス名が付くので、クロームで検証してみましょう。

そしてCSSで動きに対してレイアウトを変えていきます。

header nav {
	position: absolute;
	left: 0;
	bottom: 0;
}
header nav.scrolloff {
	position: fixed;
	top: 0px;
	bottom: initial;
	z-index: 10;
}

このCSSでは今回の動作用の最小限で記述しています。
後は良いようにしてね！