読者です 読者をやめる 読者になる 読者になる

North-Geek

North-Geek(ノース・ギーク) 北海道札幌市在住のWebプログラマー・エンジニア

北海道札幌在住のWebプログラマーのブログです。

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

Web web-jquery Webデザイン blog-カスタマイズ

f:id:northgeek:20160519231302j:plain

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

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


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

Demo


動作イメージ

f:id:northgeek:20160521103942j:plain
▲通常時のナビゲーションメニューです。下へスクロールすると...


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秒かけてスライドさせる。という動作になります。

カスタマイズ

ナビゲーションの高さ70px以上ある場合など、そのWebサイトにあったカスタマイズが必要になる場合がありますので、調整が必要な場合は以下を参考にしてください。


  • ナビゲーションの高さが70px以上の場合は、「gNav.css({"top": '-70px'});」、70pxの値を変更します。
  • アニメーションの速度を変えたい場合は、「gNav.animate({"top": 0},500);、500の値を変更します。(500は0.5秒かけて表示)
  • アニメーションが必要ない場合は「gNav.animate({"top": 0},500);」を除去します。

さいごに

いかがでしたでしょうか。Web制作における、よくある動きである「ナビゲーションをアニメーションで表示しページ上部に固定する方法」紹介しました。

今回はjQueryでアニメーションする方法を紹介しましたが、次回はCSS3でアニメーションさせる方法も紹介しようと思います。

Copyright© North-Geek All Rights Reserved.