常にページ上部に固定させる場合
//HTML
<header>
<nav id="global-nav">
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
<li><a href="#">メニュー5</a></li>
</ul>
</nav>
</header>
//CSS
header {
position: fixed;
width: 100%;
top: 0;
z-index: 10000; }
途中から固定する場合
$(function() {
var menu = $('#global-nav'),
offset = menu.offset();
$(window).scroll(function () {
if($(window).scrollTop() > offset.top) {
menu.addClass('fixed');
} else {
menu.removeClass('fixed');
}
});
});
.fixed {
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}
