TAGS :, ,

昨日のエントリーで書いた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;
	});
});
[/javascript]

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

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


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

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

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