WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

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

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

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

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

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

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

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

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

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

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

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

[html]
◆HTML

コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。

コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。

コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。

コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。

コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。

コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。

コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。

コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。コンテンツエリアの内容。


[/html]

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

[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;
}
[/css]

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

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

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

[javascript]
◆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』の値を変更するだけで対応可能です。 今回は単純な追尾型メニューリストですが、 ここからまた応用することで何か新たなインターフェースが出来ないかと考え中です。。。 追尾型のメニューリストが必要になった際に是非。。。 サンプルファイルをダウンロードしたい方はこちらから

jQueryでスクロール追尾型メニューリストを作ってみる」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です