[流行りのUI] 一定までスクロールしたら付いてくるアレを実装してみた

,

ナビゲーションなど、ある一定の位置までスクロールしたら absolute から fixed に変化するUIが最近多くなったなーって思っています。facebookもそうですし、Webクリエイターボックスや、、まあ他にもあったと思いますが今は思い出せませんよ。ええ。

それを簡単に実装してみました。

デモ:http://negic.net/demo/scrollNav/

おまけに、ある位置までスクロールしたらナビゲーションのリンクを変化させてみました。
ぶっちゃけ言うとこっちのほうが時間かかりましたけどね。

どうやっているかを今回のデモを例に説明します。
#globalHeader の位置を offset で取得して、window のスクロール位置($(window))が #globalHeader のスクロール位置を超えたら #globalHeader の position を absolute から fixed に変化させています。


var gHead = $("#globalHeader"),
    gHeadOffset = gHead.offset(); // #globalHeader の位置を offset で取得

$(window).on("scroll", function() {
    // windowのスクロールが#globalHeaderを超えたら
    if ( $(this).scrollTop() >= gHeadOffset.top ) {
        // #globalHeaderのpositoinをabsoluteからfixedにしている処理
        gHead.css({
            position: "fixed",
            top: "0px"
        });
    // もとの位置に戻ったら absolute に戻す
    } else {
        gHead.css({
            position: "absolute",
            top: gHeadOffset.top
        });
    }
});

ナビゲーションの変化の方は、まあこれの応用みたいなものなので解説はしません。ソースでも見て下さい。