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

Tweet

238

最近、スクロールすると

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

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

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

大体は、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を使った例を適当に

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

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

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

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

プチ情報

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

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

Tweet

短縮URL:

2014年08月06日 WEB制作系 コード・プラグイン jQueryscrollscrollTop