jQueryプラグイン：スクロール後に指定したナビゲーション等を固定する「STICKYMOJO.JS」を試してみました。

PHPSPOT開発日誌さんで紹介されていたjQueryプラグイン「STICKYMOJO.JS」を試してみました。
サイドに配置したナビゲーションなどのコンテンツを、ブラウザ上端までスクロールしたら固定配置に切り替えるプラグインです。

stickyMojo

head要素に以下のように記述し、

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/stickyMojo.js"></script> <!--stickyMojo.jsをダウンロードして任意のフォルダに設置する。-->
<script type="text/javascript">
$function(){
     $('#sidebar').stickyMojo({footerID: '#footer', contentID: '#main'});
});
</script>

以下のような構成のhtmlレイアウトで動作するようです。

<div id="wrapper">
 
  <div id="sidebar">
    <p>sidebar</p>
  </div>
 
  <div id="main">
    <p>main</p>
  </div>
 
  <div id="footer">
    Footer
  </div>
 
</div>

#sidebar、#footer、#mainなどのセレクタは任意のものに変えてもよいようです。

参考にさせていただいたサイト

スクロールしたときにサイドバーのパーツをjQueryで止める方法: 小粋空間

[JS]複数の指定した範囲ごとにスクロールに追従するパネルを設置するスクリプト -jQuery Stick ‘em | コリス