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

イテル on 07 24, 2009

090724

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 = &amp;quot;#menu&amp;quot;;
var menuYloc = null;
$(function(){
	menuYloc = parseInt($(name).css(&amp;quot;top&amp;quot;).substring(0,$(name).css(&amp;quot;top&amp;quot;).indexOf(&amp;quot;px&amp;quot;)));
	$(window).scroll(function () {
		offset = menuYloc+$(document).scrollTop()+&amp;quot;px&amp;quot;;
		$(name).animate({top:offset},{
			duration:350,
			queue: false
		});
	});
});

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

今回のサンプルはコチラ

Web Designing (ウェブデザイニング) 2009年 08月号 [雑誌]
Web Designing (ウェブデザイニング) 2009年 08月号 [雑誌]
  • 発売元: 毎日コミュニケーションズ
  • 価格: ¥ 1,280
  • 発売日: 2009/07/18

Leave a Reply