jQueryのscrollTopを使った変化する要素を作る

PR

最近、スクロールすると

ヘッダー部分のナビゲーションが変化するのをよく見かけますね

ある程度スクロールするとついてくるタイプのものや

スクロールするとサイズや形が変化するタイプのもの等々ありますね

 

大体は、jQueryのscrollTopを使って行われることが多い

他には、jQueryのプラグインを使ったりと。

 

ヘッダーにある、ナビゲーションでしたら

プラグインを使わずに、jQueryのscrollTopを使うだけで結構簡単に

スクロールをトリガーに変化させることが出来ます

 

 

jQuery scrollTop

$(window).scroll(function () {
  
  /*どのくらいスクロールしたら実行するか この例では15以上*/
  if ($(window).scrollTop() >= 15) {
    
    /*15以上スクロールした時のアクション*/
    $("div").css("display","none");
  } else {
    
    /*15以上スクロールしていない時のアクション*/
    $("div").css("display","block")
  }
});

 

scrollTop を使うときの基本的なコード

  • 1行目で、画面でスクロールが会った時に実行する文
  • 4行目で、実行する内容に条件をつけます 今回は15以上スクロールした時の動作と、そうではない時の動作
  • 7行目で、15以上の時のアクション
  • 11行目で、15以上では無いときのアクション

 

今回はインラインスタイルで追加していますが

addclassに置き換えてクラスの追加、removeclassでクラスの削除としてやることも出来ます

CSSが多い場合はクラスの追加と削除をしたほうがスマートかと思います

 

 

scrollTop を使ってできること

scrollTopを使えば、ナビゲーション以外にもいろいろなことに使えます

 

例えば

  • 先頭へ戻るのボダンを ある程度スクロールしたら表示させる
  • ある程度スクロールするとついてくる、サイドバー
  • 画面の上部から、ある一定の距離に入ると、アニメーションをつけたり 実行したりする

 

 scrollTopを使った例を適当に

スクロールである一定以上スクロールした場合にグローバルナビゲーションが変化する

DEMO 表示

 

ある一定以上スクロールすると、先頭へ戻るが出現する

DEMO 表示

 

スクロールがあると即座に、実行とある程度スクロールすると実行するものを組み合わせたもの

DEMO 表示

 

scrollTopで要素との距離によって  opacity が変化するようにしたもの
rotateとか色んな、スクロールに合わせた変化を作るときの参考になるかと

DEMO 表示

 

 

 

プチ情報

似たものとして inviewというものがあります

inviewは画面に表示されたら、実行するものです

PR

COMMENT

コメントを残す

PR

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

WDG WEB DESIGN GALLERY ウェブデザインギャラリー