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

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

なにこれ

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

固定される要素：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に格納しておくべきかな。