位置を固定したメニューを作るjQueryプラグイン「stickUp」

WEBサイトのトレンドである縦長ページにおいてメニューを上部に固定することが多くなっています。
これにより、現状どこを見ているのか、またどこまでページが続くのかなど明示できユーザーにとって優しくなります。
stickUp - a free jQuery Pluginにより簡単に導入できます。

sponsors

導入方法

下記のようなメニューがあったとします。

		 <div class="navbar">
              <ul class="navbar-nav">
                <li class="menuItem active"><a href="#home">Home</a></li>
                <li class="menuItem"><a href="#features">導入方法</a></li>
                <li class="menuItem"><a href="#news">サンプル</a></li>  
              </ul>
	 </div>
これに導入するため、まずはstickUp - a free jQuery Pluginからファイル一式をダウンロード。
そして、下記のように記述します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="stickUp.js"></script>
<script>
jQuery(function($) {
	$(document).ready(function() {
	    $('.navbar').stickUp({ parts: { 
		    //メニューのhrefと同じにする
		    0:'home', 
		    1:'features',
		    2: 'news' }, 
		    itemClass: 'menuItem', //メニューのclass名
		    itemHover: 'active' //アクティブ時のclass名
		});
	});
});
</script>
最後に上記に対応するCSSを書いてレイアウトを整えれば完成です。

サンプル

ご覧の通り!
Javascriptサンプルページ一覧
skuare.net