スクロールすると隠れるナビゲーションバー（jQuery）

Author Date
Comments: Leave a comment

皆さん、こんには
うだつのあがらないWebデザイナー
はりるんです。

今回はこのサイトに搭載されている
スクロールすると消えるナビゲーションを紹介します。

基本的にjQueryはオリジナルで組んでみました。
以下、ソースです。
jQUeryは非常にシンプルになってます。

一番上にスクロールすれば表示され、
それ以外は薄く表示されるようになってます。
また、ナビゲーションバーをマウスオンすれば、
透明度がゼロになって表示されるというものです。

以下のソースはWordPressに搭載前の試作版ですので
実際のソースは若干ちがいます。

jQUery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

$(function() {
	$(window).scroll(function(){
		var scrollTop = $(window).scrollTop();
			if(scrollTop != 0)
				$('#nav').stop().animate({'opacity':'0.2'},400);
				//スクロールが上でない場合は0.2の表示でうすくなる。
			else	
				$('#nav').stop().animate({'opacity':'1'},400);
				//スクロールが一番の場合は1（100%）の表示。
			});
 
		$('#nav').hover(
			function (e) {
				var scrollTop = $(window).scrollTop();
				if(scrollTop != 0){
					$('#nav').stop().animate({'opacity':'1'},400);
				//スクロールが上でなく、ナビゲーションにマウスが乗ると0.2の表示でうすくなる。
				}
			},
			function (e) {
				var scrollTop = $(window).scrollTop();
				if(scrollTop != 0){
					$('#nav').stop().animate({'opacity':'0.2'},400);
				//ナビゲーションからマウスが乗ると1（100%）の表示。
			}
		}
	);
});

opacityはcssでの「透明度」のことで、1だと透明度はなく、0になると透明になります。
400というのはアニメーションの速度で、フェイドアウト気味にうすくなるようにしています。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!--ナビゲーション-->
<div id="nav">
<div id="nav-inner">
<h1><a href="#"><img src="images/head_logo.gif" alt="Hallyrun's @ Archive（はりるん @ アーカイブス）" width="63" height="34"></a></h1>
 
<div id="nav-menu"> 
<form method="get" action="<?php bloginfo('url'); ?>" class="search-box">
<p class="serch_form">
  <input type="text" name="s" id="s" onBlur="if (this.value == '') {this.value = 'サイト内検索';}" onFocus="if (this.value == 'サイト内検索') {this.value = '';}" value="サイト内検索">
  <input type="submit" name="b" id="b" value="">
</p>
</form>
<ul class="top-icon">
<li><a href="http://twitter.com/#!/hallyrun" target="_blank"><img src="images/icon_tweet.gif" alt="twitter" width="16" height="16"></a></li>
<li><img src="images/icon_rss.gif" alt="RSSフィード" width="16" height="16"></li>
</ul>
<div class="menu-mainmanu-container">
<ul id="menu-mainmanu" class="menu">
<li><a href="#"><img src="images/nav_info.gif" alt="Link" width="28" height="14"></a></li>
<li><a href="#"><img src="images/nav_cartoon.gif" alt="Cartoon" width="53" height="14"></a></li>
<li><a href="#"><img src="images/nav_photo.gif" alt="Photo" width="42" height="14"></a></li>
<li><a href="#"><img src="images/nav_about.gif" alt="About" width="43" height="14"></a></li>
<li><a href="#"><img src="images/nav_link.gif" alt="Link" width="29" height="14"></a></li>
<li><a href="#"><img src="images/nav_contact.gif" alt="Contact" width="52" height="14"></a></li>
</ul>
</div>
</div>
</div>
</div>
<!--//ナビゲーション-->

ナビゲーションは普通にコーディングしています。
ただし、ここから若干WordPress実装用にすこしだけアレンジしています。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/* --- nav */
#nav{
	position:fixed;
	//ここを「fixed」にするのがポイント
	top:0px;
	left:0px;
	right:0px;
	background:#F9FBEA url(images/nav_line.gif) repeat-x bottom left;
	padding-top: 13px;
	padding-bottom: 13px;
	height: 34px;
	padding-right: 0px;
	padding-left: 0px;
	z-index:10;
}

コメントにも書いていますが、
ナビゲーションのベースになる部分を
「fixed」で固定化させるのがポイントです。

比較的軽いので
試してみてはいかがですか？

Webデザイナーのための jQuery入門　魅力的なユーザーインターフェースを手軽に作る (Books for Web Creative)

新品価格
￥3,024から
(2013/4/27 16:50時点)

おすすめのjQuery本。
これを見ながら実践で学ぶとよいかも…。

こちらの記事もおすすめです

Related Posts via Taxonomies