【jQuery】ナビゲーションをアニメーションで表示しページ上部に固定する方法

f:id:northgeek:20160519231302j:plain

フロントエンドの仕事でWebサイトの構築をしていると、スクロールしてナビゲーションの高さを超えたら上部へ固定し、元のナビゲーションの位置より上に戻ったら上部固定を解除するという処理をすることがよくあります。

今回はプラスアルファで、上部固定をするときにアニメーション付きでナビゲーションを表示する方法を紹介しようと思います。

早速ですが、まずは下記のDemoを御覧ください。

Demo

動作イメージ
アニメーションさせるためのソース
- 解説
- カスタマイズ
さいごに

動作イメージ

▲通常時のナビゲーションメニューです。下へスクロールすると...

f:id:northgeek:20160521103952j:plain
▲スルッと表示されてウィンドウ上部に固定

このブログをPCで閲覧している方はナビゲーションが上部に固定されていることがわかると思います。
※PC限定です。スマホ表示の場合は最初から上部固定されています。

アニメーションさせるためのソース

ざっくりやることは2つです。

ナビゲーションの位置より「下」へスクロールするととスルッと上部固定
元のナビゲーションの位置より「上」へスクロールするとサッと上部固定が解除

<!--HTML-->
<header>
	<div class="inner">
		<img src="common/img/img01.jpg" width="980">
	</div>
	<nav class="g-nav">
		<div class="inner">
			<ul class="g-nav-menu">
				<li>menu01</li>
				<li>menu02</li>
				<li>menu03</li>
				<li>menu04</li>
				<li>menu05</li>
			</ul>
		</div>
	</nav>
</header>

// CSS
.inner{
	width: 980px;
	margin: 0 auto;
}
.g-nav{
	width: 100%;
	z-index: 10;
	background-color: #34495e;
}
.g-nav-menu{
	width: 100%;
	overflow: hidden;
}
.g-nav-menu li{
	width: 20%;
	float: left;
	color: #fff;
	list-style-type: none;
	padding: 8px 0;
	text-align: center;
}
.fixed{
	position: fixed;
	top: 0;
	left: 0;
}

// jQuery
$(function() {
	var gNav = $(".g-nav");
	var gNavOffset = gNav.offset();

	$(window).scroll(function () {
		if($(this).scrollTop() > gNavOffset.top && gNav.hasClass('fixed') == false) {
			gNav.css({"top": '-70px'});
			gNav.addClass('fixed');
			gNav.animate({"top": 0},500);
		}
		else if($(this).scrollTop() < gNavOffset.top && gNav.hasClass('fixed') == true){
			gNav.removeClass('fixed');
		}
	});
});

解説

ナビゲーション部分のHTMLである＜nav class="g-nav"＞にfixedをつけて固定します。その際に、あらかじめtop:-70pxを指定して、画面の上側である見えないところに配置しておきます。そしてアニメーションでtop:0pxを指定して-70pxから0pxへ0.5秒かけてスライドさせる。という動作になります。