イテルの一日一問

スクロールしても追従してくるメニュー（jQuery）

イテル on 07 24, 2009

web designing（以降、webdes）の09年8月号より、自分でコピペできるようにメモ。
webdesではjQueryの特集が組んであり、これは私も将来使うのではないかと思う項目がたくさんあった。

ちなみに追従するメニューのことを、プロはフローティングメニューというらしい。
さっそくwebdesのコードをさらしてみる。
別途jQueryはダウンロードする必要があるのであしからず。

ヘッダーにcssとjQueryを読み込む

<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/livefloatingmenu.js"></script>

コンテンツとメニュー

<div id="contents">
	<h1>フローティングメニュー</h1>
	<p>ほげコンテンツ</p>
</div>
<div id="menu">
	<h2>メニュー</h2>
	<ul>
		<li><a href="#">メニュー1</a></li>
		<li><a href="#">メニュー2</a></li>
		<li><a href="#">メニュー3</a></li>
		<li><a href="#">メニュー4</a></li>
		<li><a href="#">メニュー5</a></li>
	</ul>
</div>

JS：livefloatingmenu.js

var name = "#menu";
var menuYloc = null;
$(function(){
	menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")));
	$(window).scroll(function () {
		offset = menuYloc+$(document).scrollTop()+"px";
		$(name).animate({top:offset},{
			duration:350,
			queue: false
		});
	});
});

durationの数値を変えることで、追従するタイミングを変更できる。
また、queueをtrueに変更すると良くわからん動きをする。

今回のサンプルはコチラ。

Web Designing (ウェブデザイニング) 2009年 08月号 [雑誌]

• 発売元: 毎日コミュニケーションズ
• 価格: ￥ 1,280
• 発売日: 2009/07/18

posted with Socialtunes at 2009/07/26