スクロールすると画面上部に固定されるやつ

自分用備忘録でスンマセン。

#なにこれ
固定したい要素はページの最上部には無く、スクロールして表示画面の上部に来たタイミングで固定されるやつ。

固定される要素：nav
それをラップする要素：div#nav
とする。

navにposition: fixed;を適用した際に、navより下にある要素が上詰めされてしまう。
それを防ぐため、div#navはnavの高さを保持する。

ソースはコアな部分しか書いてないです。

#ケース1
固定する要素の高さがpx,rem等により指定される場合

HTML

<div id="nav">
	<nav>
		<ul><!--// 固定される要素の中身の例 //-->
			<li><a href="page1.html">page1</a></li>
			<li><a href="page2.html">page2</a></li>
			<li><a href="page3.html">page3</a></li>
		</ul>
	</nav>
</div>

CSS

#nav {
	position: relative;
	width: 100%;
	height: 3rem;
}

nav {
	position: absolute;
	width: 100%;
	height: 3rem;
}

nav.fix {
	position: fixed;
	top: 0;
	max-width: 100vw;
}

JavaScript(jQuery)

$(function(){
	$(window).on('load scroll', function(){
		if( $(this).scrollTop() > $('#nav').offset().top ) {
			$('nav').addClass('fix');
		}
		else {
			$('nav').removeClass('fix');
		}
	});
}

#ケース2
固定する要素の高さをJSで取得する場合
(navの高さにremとpxが混在する場合、navの高さがその中の要素に依存して決まる場合など)

CSS

#nav {
	position: relative;
	width: 100%;
}

nav {
	position: absolute;
	width: 100%;
}

JavaScript

$(function(){
	$(window).on('load scroll', function(){
		if( $(this).scrollTop() > $('#nav').offset().top ) {
			$('nav').addClass('fix');
		}
		else {
			$('nav').removeClass('fix');
		}
	});

	$('#nav').height( $('nav').outerHeight(true) );
}

#ケース3
固定する要素より上部にある要素の高さが、レスポシブデザイン等の理由でページ表示中に変化する場合

(ウィンドウのリサイズで上部の要素の高さが変わる場合は$(window).on()にresizeを追加)

JavaScript

$(function(){
	$(window).on('load scroll resize', function(){
		if( $(this).scrollTop() > $('#nav').offset().top ) {
			$('nav').addClass('fix');
		}
		else {
			$('nav').removeClass('fix');
		}
	});
}

#あとがき
$(window)の.on('scroll', function)中で何度もjQueryオブジェクトを作ってると目に見えてラグが出るんで、やっぱりjQueryオブジェクトは外側のvarに格納しておくべきかな。