• web制作

【jQuery】ヘッダーを最上部に固定!

佐藤
このエントリーをはてなブックマークに追加

先日USJでハリーポッターのアトラクションがオープンしましたねぇ
私も早く行きたくてフォイフォイしてます。

さて、最近時間を見つけては使いそうなjQueryを集めていましたが、
今回はそんな中から割と使うことの多い「headerを上部に固定」するjQueryをご紹介。

常にheaderを表示させておきたい!

縦に長いページの場合、画面がスクロールしてしまうとheader部分が隠れてしまい
スクロールバーや「TOPへ戻る」のボタンで一度一番上まで戻る・・・なんて事が
あるかと思います。(まぁ大体footerにもメニューがありますが)

そんな時、常に最上部にheaderがあればサクッとページ遷移できますね。

サンプルソース

ってことで、まずはjQuery部分から。

jQuery

あらかじめjQuery本体は読み込ませておいてください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

その上で、下記スクリプトをhead部分に記述してください。

<script>
$(function() {
var bt = $("header").offset().top; 
var ds = 0;

$(document).scroll(function(){ 
    ds = $(this).scrollTop(); 

    if (bt <= ds) {  
        $("header").addClass('follow'); 
    } else if (bt >= ds) { 
        $("header").removeClass('follow'); 
    }
	});
});
</script>

“header”部分は変更できますが、対応する部分を一緒に変えるのをお忘れなく。

CSS

簡単なナビも一緒に付けちゃいましょう。

#content {
	position: relative;
	background:#D9CDBC;
	height: 3000px;
}
header {
	position: absolute;
	top: 250px;
	background: #333;
	width: 100%;
	text-align: center;
}
#content .follow {
	position: fixed;
	top: 0;
}
a {
	color:#FFF;
	text-decoration:none;
}
ul {
	width:800px;
	overflow:hidden;
	list-style:none;
	margin:0 auto;
}
ul li {
	width:200px;
	float:left;
	padding:20px 0;
	background:#999;
}
ul li:hover {
	background:#666;
}

17行目より下はナビがいらない場合は無視してください。

HTML

最後にhtmlを記述して完成です。

<body >
<div id="content">
  <header>
    <ul>
      <li><a href="#">(0w0)</a></li>
      <li><a href="#">(0M0)</a></li>
      <li><a href="#">(0H0)</a></li>
      <li><a href="#">(<::V::>)</a></li>
    </ul>
  </header>
</div>
</body>

デモページ

こんな感じですね、重宝しそうだったので知識として
覚えておくと役に立つ日がくるかも知れません。
あ、リスト内の顔文字は気にしないで頂けると助かります・・・。

ではでは〜

参考サイト: http://kachibito.net/snippets/scroll-with-element

rss登録
このエントリーをはてなブックマークに追加