jQueryのscrollとscrollTOPを使って一定量をスクロールしたら実行するコードの例

Tweet

239

ナビゲーションがすぐに付いてくるのではなく、ある一定量をスクロールしたら付いてくるタイプのナビゲーションがありますよね、あのようなものを実装するのにjQueryを使えば簡単に出来てしまいます

jQueryのscrollとscrollTopを使って一定量のスクロールで実行するコード

例

Batman nav.
By Mighty Shaban

こちらの画面を、ある程度スクロールしたらナビゲーションが表示されるかと思います、これはjQueryを使って現在のwindowの位置を条件分岐してクラスを付けたり消したりすることで表示させています

javascript (jQuery)のコード

$(window).scroll(function() {

    if ($(window).scrollTop() > 100) {
        $('.main_h').addClass('sticky');
    } else {
        $('.main_h').removeClass('sticky');
    }
});

1行目でスクロールされたら、コードを実行でそれぞれの条件にあうコードを実行するようにしています

ifでscrollTopが100以上の時 stickyというクラスを.main_hのクラスがついたタグにつける

それ以外の時にはstickyクラスを.main_hから削除する

言葉にすると、こうなっています

もっと略すと

• スクロールを感知
• スクロールされた量が100以上なら クラスをつける
• スクロールされたら量が100未満 だったらクラスを外す

このコードをつかってナビゲーション以外にも色々作れるかなと思います

あと、サイドバーが付いてくるstickyもこれの応用で作れるかなと思います

Tweet

短縮URL:

2014年05月17日 WEB制作系 コード・プラグイン jQuery