Edited at

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

More than 5 years have passed since last update.


追記: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 イベントを使う。これなら、ドラッグ中のイベントを設定可能。