ヘッダーを固定するjQueryプラグイン(Waypointsプラグイン)

jquery

色々なサイトでよくみかける、ヘッダーを固定にするjQueryプラグインを紹介します。

今回紹介するWaypointsプラグインは、ヘッダーを固定にする以外にも色々なことができる便利なやつです。
ただし今回はヘッダー固定のみを紹介します。

[スポンサーリンク]

当ブログでは、ある程度スクロールするとサイドバーが固定となるようにしています。
こちらは、今回紹介するプラグインではなく、exflexfixedというプラグインを使用しています。
使い方はこちらを参考にして下さい。

この章でやること

Waypointsプラグインを使って、ヘッダーを固定にします。

Waypointsをダウンロードする

Waypointsを取得します。
ダウンロードは本家からどうぞ。
waypoints-header1

Waypointsの導入方法

ハイライトになっているjsが必要になります。
jquery.min.jsは、Google Developersを使っています。
Google Developersの詳細は、こちらをどうぞ


<!doctype html>
<html>
<head>
<meta charset="utf-8" content="">
<title>Waypointsのサンプル</title>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
<script src="./js/waypoints.min.js"></script>
<script src="./js/waypoints-sticky.min.js"></script>

ヘッダーを固定するサンプルソース


<!doctype html>
<html>
<head>
<meta charset="utf-8" content="">
<title>Waypointsのサンプル</title>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<script src="./js/waypoints.min.js"></script>
<script src="./js/waypoints-sticky.min.js"></script>

<!-- スクリプト部分 -->
<script type="text/javascript">
$(document).ready(function() {
	$('.my-sticky-element').waypoint('sticky');
});
</script>

<!-- CSS -->
<style>

	.my-sticky-element.stuck {
		position:fixed;
		top:0;
		box-shadow:0 2px 4px rgba(0, 0, 0, .3);
	}

	.inner {
		width:460px;
		padding:0 10px;
		margin:0 auto;
	}

	h2.my-sticky-element {
		text-align:center;
		background:#ff9400;
		color:#000;
		width:460px;
		margin:0 auto;
		font-size:24px;
		border:solid 4px #ccc;
	}

	div.main-contents{
		margin:0 auto;

		width : 460px;

		border:solid 4px #ccc;
		background:#b0d0ff;
	}

</style>

</head>

<!-- HTML部分 -->
<body bgcolor="#e2e2e2">

	<div class="inner">
		<h1>Waypointsのサンプル</h1>
		<h2 class="my-sticky-element">This is Header!!</h2>
	</div>

	<div class="inner">
		<div class="main-contents">
			<h3>ヘッダーが固定されます。</h3>
				<div>
				<p>test test test!!</p>
				</div>
		</div>
	</div>
</body>
</html>

デモ

実際に動かすことが出来ます

解説

15行目の「$('.my-sticky-element').waypoint('sticky');」でヘッダ固定となるように設定しています。

22~26行目のCSSが無いと正常に動作しません。
CSS部分で、position:fixed;を使っているのが少し腑に落ちませんが。。( ̄д ̄)

こちらのサンプルソースでは、マウススクロールにあわせて、62行目のエレメントが固定されるように設定しています。

さいごに

CSSだけでもヘッダの固定はできますが、ブラウザによってはうまく固定できないこともあります。(IE6対応とか)

Waypointsプラグインは、ヘッダ固定意外にも色々な技を提供してくれるプラグインです。
例えば、ページ内である一定の場所までスクロールしたら、下からボタンがにゅっと出てくる仕掛けは、Waypointsプラグインを使えば出来ます。

次回は、Waypointsプラグインを使った色々な技を紹介していきます
それでは!