昨日のエントリーで書いたjQueryでのスクロール制御を応用して、
追尾型メニューリストを作ってみました。

Webページ画面の左だったり右だったりに配置してあるメニューリストを
スクロールをしても位置を固定して画面上から消えないようにするもの。

縦に長くなってしまうサイトなどでは、
これがあるとユーザーにも親切な感じがします。(うっとおしく思う人もいるみたいですが。。。)

今回作るサンプルはサイトヘッダーが高さ「50px」の場合を基準にしています。
※もちろんここの値はどんな形にでも変更可です。

まずは動作サンプルから。

動作サンプルを別枠で表示する

iframe内をスクロールすると画面左のメニューリストが
ヘッダーを過ぎた時(ページ上部から50pxを過ぎた時)に固定となり
ページ内に留まります。(IE6では少々ガタつきますが、もうIE6は放っておきます…)

そして、スクロール位置がヘッダーに差し掛かった時(ページ上部から50px以内に入った時)に
再度CSSを通常時の状態に戻します。

ただそれだけではおもしろくなかったので、
固定になった際にメニューリストに「▲ページTOPへ」のリンクを出現させてみたり。
クリックでスクロールしてページのTOPへ遷移のおまけを付けてみたり。
(この「▲ページTOPへ」を出現させる位置はどこでも変更可能です。)

このサンプルの構成は以下のような感じに
まずはHTMLソースから。

◆HTML
<div id="container">

<div id="header">サイトヘッダー</div>

<div id="contents">
<p>コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。</p>
<p>コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。</p>
<p>コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。</p>
<p>コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。</p>
<p>コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。</p>
<p>コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。</p>
<p>コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。</p>
<p>コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。</p>
</div><!--/contents-->

<div id="fixedMenu">
<ul>
<li id="fixedPagetop"><a href="#">▲ページTOPへ</a></li>
<li><a href="#">CONTENTS01</a></li>
<li><a href="#">CONTENTS02</a></li>
<li><a href="#">CONTENTS03</a></li>
<li><a href="#">CONTENTS04</a></li>
<li><a href="#">CONTENTS05</a></li>
</ul>
</div><!--/fixedMenu-->

</div><!--/container-->

『id=”fixedMenu”』が固定の対象となるエリアになります。
続いてCSS。

◆CSS
body {
	font-size: 100%;
	line-height: 140%;
	font-family: Arial,Helvetica,sans-serif;
	background: #fff;
}

*html body {
	background: #fff url(null) fixed;
}

a:link { text-decoration:underline; color: #1b38cc;}
a:visited { text-decoration:underline; color: #1b38cc;}
a:active { text-decoration:none; color: #1b38cc;}
a:hover { text-decoration:none; color: #1b38cc;}

#container {
	width: 100%;
	position: relative;
}

#header {
	width: 100%;
	height: 50px;
	line-height: 50px;
	font-weight: bold;
	text-indent: 10px;
	background: #efefef;
}

#fixedMenu {
	top: 50px;
	left: 0;
	width: 150px;
	position: absolute;
}

*html #fixedMenu {
	position: absolute;
	top: expression(eval(document.documentElement.scrollTop+0));
}

#fixedMenu ul {
	width: 130px;
	border-top: #ddd 1px solid;
}

#fixedMenu ul li {
	width: 130px;
	border-left: #ddd 1px solid;
	border-right: #ddd 1px solid;
	border-bottom: #ddd 1px solid;
}

#fixedMenu ul li a {
	padding: 5px 0;
	width: 130px;
	text-indent: 10px;
	display: block;
}

#fixedMenu ul li#fixedPagetop {
	display: none;
}

#fixedMenu ul li#fixedPagetop a {
	color: #fff;
	font-weight: bold;
	background: #555;
}


#contents {
	margin-left: 150px;
	padding: 10px 0;
	width: 300px;
	height: 1000px;
}

#contents p {
	padding: 0 0 20px 0;
}

固定エリアとなる『#fixedMenu』が重要になります。
CSSファイルではひとまず『position: absolute;』に設定。

CSS内にIE6のガタつき回避の指定をとりあえず入れていますが、
jQuery側で値を変更してしまうので意味を成さず。。。

そして肝心のSCRIPT部分は、以下のような感じに。

◆SCRIPT(jQuery)
$(function(){
	$(window).scroll(function () {
		var ScrTop = $(document).scrollTop();
		if (ScrTop > 50) {
			$('#fixedMenu').css({'position':'fixed','top':'0'});
				if($.browser.msie && $.browser.version < 7){
					$('#fixedMenu').css('position','absolute')
						       .css('top',($(document).scrollTop()) + "px");
				}
			$('#fixedPagetop').css({'display':'block'});
		}
		if (ScrTop < 50) {
			$('#fixedMenu').css({'position':'absolute','top':'50px'});
			$('#fixedPagetop').css({'display':'none'});
		}
	});
	$('#fixedPagetop a').click(function(){
		$('html,body').animate({ scrollTop: 0 }, 1000);
		return false;
	});
});

スクロール位置を判断して、固定エリアとなる『#fixedMenu』の『position』を
『fixed(固定)』と『absolute』に切り替えて位置を調整しています。

サイトヘッダー高さが50pxではない場合には、
スクリプト内のスクロール位置を判別している『if (ScrTop > 50) 』と『if (ScrTop < 50) 』と
元の位置に戻す際の『top』の値を変更するだけで対応可能です。

今回は単純な追尾型メニューリストですが、
ここからまた応用することで何か新たなインターフェースが出来ないかと考え中です。。。

追尾型のメニューリストが必要になった際に是非。。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (1)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでスクロール追尾型メニューリストを作ってみる

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner