<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ついてくるヘッダーメニューを作ってみる</title>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/ui/jquery-ui.js"></script>
<style>
*{margin:0;padding:0;}
ul{list-style-type:none;}
p{font-family:"メイリオ";}
body{padding-top:192px;}
header #navMenu{
margin: 0 auto;
width: 960px;}
/* ページヘッダーに付すclass */
.pHeader{
/*
全体のレイアウトに影響しないように
ヘッダーを固定する
*/
position:absolute;
width:100%;
min-width:960px;
box-shadow: 0 2px 2px rgba(0,0,0,0.3);
background-color:#f0f0f0;}
nav ul li{float:left;}
nav ul li a{
line-height:48px;
letter-spacing:2px;
padding:0 1.5em;}
/*
ウィンドウのスクロール量が一定値を超えたら
要素に付すクラス
*/
.pHeader.sticky{
position:fixed;
top:0px;}
#container{
/*
li a内のline-heightのpxと同じ値を
設定している。これがないと、テキストの
一部がメニュー下に隠れてしまう。
*/
padding-top:48px;
width:960px;
background-color:#d8d8d8;
margin:0 auto;}
</style>
</head>
<body>
<header class="pHeader">
<div id="navMenu">
<nav>
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
</ul>
</nav>
</div>
</header>
<div id="container">
<p>
どこまでも追尾してくるヘッダーメニューのテスト<br>
下にスクロールをさせてみてください。<br>
どこまでもメニューがついてきます。
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p>
</div>
<script>
$(function(){
$(".pHeader").each(function(){
/*
ウィンドウとヘッダーを
jQueryオブジェクトとする
*/
var
$window = $(window),
$header = $(this);
/*
ヘッダーのデフォルト位置を取得する
変数offsetTopには、ドキュメントの上端からの距離が
pix単位で格納されています。
offset()メソッドは
「jQuery要素のドキュメント上の位置を取得」します。
offset()は２つのプロパティを保持してます。
top :ドキュメント上端からの距離
left:ドキュメント左端からの距離
*/
var hOffsetTop = $header.offset().top;
/*
ウィンドウのスクロールされたとき
実行される処理はここのfunction(){..}に書く
*/
$window.on("scroll",function(){
/*
ウィンドウのスクロール量を調べ
ヘッダーの初期位置より下にスクロール
しているかを判定する
*/
if( $window.scrollTop() > hOffsetTop ){
/*
初期位置より下にスクロールしている場合
"sticky"classを付す
*/
$header.addClass("sticky");
}else{
$header.removeClass("sticky");
}
});
/*
ウィンドウのスクロールイベントを発生させる
*/
$(window).trigger("scroll");
});
});
</script>
</body>
</html>