スクロールをキーとしたアクションを「waypoints.js」で実現

画面をスクロールをすることで、ナビゲーションを上部固定する方法のひとつとして、jQueryプラグインの「waypoints.js」をご紹介します。上部ナビ固定をする方法は、これまでもいくつかご紹介させて頂きましたが、今回はアニメーションエフェクトを実現出来るので参考にしてみてください。

DEMO

簡単に言ってしまうと、デフォルトのCSSに追加で別のクラス名を付けた指定を追加・削除することで表示を変化させていきます。

それでは実際に見ていきましょう。

1.jquery.waypoints.jsをダウンロード

本家サイトより「jquery.waypoints.js」をダウンロードします。

Waypoints

「lib」の中の「jquery.waypoints.js」を利用します。
配置する場所は、サンプルとして「js」フォルダの中に入れておきます。

2.HTMLを記述

headerの中にli要素で5つナビゲーションを並べています。

<header>
	<h1>Change Navi</h1>
	<ul class="nav">
		<li><a href="#">MENU-A</a></li>
		<li><a href="#">MENU-B</a></li>
		<li><a href="#">MENU-C</a></li>
		<li><a href="#">MENU-D</a></li>
		<li><a href="#">MENU-E</a></li>
	</ul>
</header>

<div id="change">
	ContainsArea
</div>

<h1>Change Navi</h1>

</ul>

</header>

ContainsArea

</div>

3.jQueryとwaypoints.jsを読み込む

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.js"></script>
<script src="js/jquery.waypoints.js"></script>

1 2	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.js"></script> <script src="js/jquery.waypoints.js"></script>

#changeという要素が、ウィンドウの上部に重なった時、headerという要素に.pointを追加するという指示になります。

4.CSSを記述

header{
	background: #455765; 
	color: #fff;
	width: 100%;
	text-align: center;
	padding: 0;
}
header h1 {
	font-size: 180%;
	background: #203744;
	padding: 25px 0;
	font-family: 'Playball', cursive;
}
ul.nav li{
	display: inline-block;
	margin: 1%;
}

header.point{
	position: fixed;
	top:0;
	left: 0; 
	opacity: 0.9;
}
header.point h1{
	float: left; 
	padding: 5px 20px;
}
header.point ul.nav li {
	margin: 10px;
}

#change {
	text-align: center;
	height: 1500px;
	width:90%;
	margin: 0 auto;
	padding: 100px 0;
	background:#FFF;
	box-shadow: 0 0 10px #666;
}

header{

background: #455765;

color: #fff;

width: 100%;

text-align: center;

padding: 0;

}

header h1 {

font-size: 180%;

background: #203744;

padding: 25px 0;

font-family: 'Playball', cursive;

}

ul.nav li{

display: inline-block;

margin: 1%;

}

header.point{

position: fixed;

top:0;

left: 0;

opacity: 0.9;

}

header.point h1{

float: left;

padding: 5px 20px;

}

header.point ul.nav li {

margin: 10px;

}

#change {

text-align: center;

height: 1500px;

width:90%;

margin: 0 auto;

padding: 100px 0;

background:#FFF;

box-shadow: 0 0 10px #666;

}

5.スライドする動きをつけてみる

ナビゲーションが変化する際のエフェクトとして、スライドしながら表示・非表示するようなオプションを追加してみましょう。

DEMO

$(function(){
	$("#change").waypoint({
		handler: function(direction){
			if (direction == 'down'){
				$("header").toggleClass("point");
				$("header.point").hide().slideDown(250);	//上部固定ナビを表示するときの速度
			}else if(direction == 'up'){
				$("header.point").slideUp(100,function(){	//上部固定ナビを非表示する際の速度
					$("header").removeClass("point").slideDown(250);	//通常のナビを再表示する際の速度
				});
			}
		}
	});
});

$(function(){

$("#change").waypoint({

handler: function(direction){

if (direction == 'down'){

$("header").toggleClass("point");

$("header.point").hide().slideDown(250); //上部固定ナビを表示するときの速度

}else if(direction == 'up'){

$("header.point").slideUp(100,function(){ //上部固定ナビを非表示する際の速度

$("header").removeClass("point").slideDown(250); //通常のナビを再表示する際の速度

});

}

});

if文で分岐させてエフェクトを切り替えています。最近良く見かけるナビゲーションのスタイルなので、色々な場面で活用できそうですね。