スクロールするとヘッダーに固定表示(アニメーションバージョン)
$(function() {
var nav = $('.nav');
//表示位置
var navTop = nav.offset().top+500;
//ナビゲーションの高さ(シャドウの分だけ足してます)
var navHeight = nav.height()+10;
var showFlag = false;
nav.css('top', -navHeight+'px');
//ナビゲーションの位置まできたら表示
$(window).scroll(function () {
var winTop = $(this).scrollTop();
if (winTop >= navTop) {
if (showFlag == false) {
showFlag = true;
nav
.addClass('fixed')
.stop().animate({'top' : '0px'}, 200);
}
} else if (winTop <= navTop) {
if (showFlag) {
showFlag = false;
nav.stop().animate({'top' : -navHeight+'px'}, 200, function(){
nav.removeClass('fixed');
});
}
}
});
});
<div class="nav">
<ul class="clearfix">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">LINK</a></li>
</ul>
</div>
.nav {
padding: 0 20px;
margin: 0 auto 60px;
width: 760px;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
//ヘッダー処理
var nav = $('#gNav'),
offset = nav.offset();
$(window).scroll(function () {
if($(window).scrollTop() > offset.top) {
nav.addClass('fixed');
} else {
nav.removeClass('fixed');
}
});