スクロールについてくるナビゲーション、スクロール追従ナビゲーション

スクロールに追従するナビゲーションを使うことになったので、
jqueryを使って動くモノに限定して調べてみました。

サイト名：CSS Tricks
記事名：「Scroll/Follow Sidebar, Multiple Techniques」
http://css-tricks.com/scrollfollow-sidebar/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:

jqueryのバージョンは1.3.2で動作。
WindowsのIE6、Firefox3.5.10、Chromeで動作確認済み。
Firefoxではやや動作がカクカクです。

設置方法

jqueryをリンクして、その直後に以下のソースコードを挿入し、
ナビゲーション部分をdiv#sidebarでマークアップしただけで動きました。

<script type="text/javascript">
$(function() {
    var offset = $("#sidebar").offset();
    var topPadding = 15;
    $(window).scroll(function() {
        if ($(window).scrollTop() > offset.top) {
          $("#sidebar").stop().animate({
            marginTop: $(window).scrollTop() - offset.top + topPadding
          });
        } else {
          $("#sidebar").stop().animate({
            marginTop: 0
          });
        };
    });
});
</script>