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

JQuery_logo
このエントリーをはてなブックマークに追加
PR

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

 

 

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

Batman nav.
By Mighty Shaban

DEMO 表示

こちらの画面を、ある程度スクロールしたらナビゲーションが表示されるかと思います、これは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もこれの応用で作れるかなと思います

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)