CSSとJSで、スクロールして一定の場所を過ぎると、上部固定するメニューを作る

追記：iPhoneなどのスマホでも気持ちよくなるように修正

なんか最近スマホサイトとかでよく見る、ちょっとスクロールすると、ページ途中にあるメニューがヘッダーに固定されるようなやつ。ヘッダー全体が最初から固定なんじゃなくて、流動的っぽいの。試しに実装してみた。

jQuery使ってるけど、特にjQueryである必要はない。普通のJavaScriptなら、document.getElementById().offsetTopでOK。

<header>
    <h1>Title</h1>
    <nav id="global-nav">
        <a href="">hogehoge</a>
    </nav>
</header>

<section>
    <p>piyopiyo</p>
</section>

jQuery(function() {
    var nav = jQuery('#global-nav');

    // メニューのtop座標を取得する
    var offsetTop = nav.offset().top;

    var floatMenu = function() {
        // スクロール位置がメニューのtop座標を超えたら固定にする
        if (jQuery(window).scrollTop() > offsetTop) {
            nav.addClass('fixed');
        } else {
            nav.removeClass('fixed');
        }
    }
    jQuery(window).scroll(floatMenu);
    jQuery('body').bind('touchmove', floatMenu);
});

header {
    height: 100px;
}

#global-nav {
    width: 100%;
}

.fixed {
    position: fixed;
    top: 0;
    z-index: 1;
}

PCなら、jQuery(window).scroll()イベントで大丈夫なんだけど、iPhoneなどでは、スクロールイベントが発火するのはタッチを離したタイミング。つまり、スクロールし終わった時。それだと、メニューが追随せず、画面外に消えて、指を話してからメニューが表示されてしまう。

解消するには、素直に touchmove イベントを使う。これなら、ドラッグ中のイベントを設定可能。