JQueryでスクロールの量によって要素を変化させる方法

2013年02月07日

最近小ネタで攻める姿勢を微塵も崩そうともしない僕ですが、みなさん元気です?

今回は案件で対応した点で、ちょっとおもしろげな対応をしたので誰かの役に立つかなぁと思ったので書いてみます。

今回やったことを応用すれば最近よく見る、スクロールしていくとサイドバーの広告が固定配置になるような手法も出来るようになります。(あれってガイドラインに沿ってないって聞いたことが歩きがするんですけどどうなんでしょうね)

やりたかったこと

TwitterBootstrapのページ上部に固定で表示させているグローバルナビの下にメインビジュアルを置きたいわけです。

scroll001

そして、そのメインビジュアルは透過pngで作られており、上に何か要素が飛び出している感じにしたいんです。

scroll002

スクロールした時によろしくない

これ自体の実装は特に問題ないです。メインビジュアルのz-indexをグローバルナビより多くして、position:absolute; すれば良いはずです。

ただし、そうした場合、画面を下にスクロールすると当然メインビジュアルがグローバルナビより上に来ますよね。これはちょとかっこ悪い

scroll003

非常に残念ですね。

ページの一番上の時とちょっとでもスクロールしたときでcssを変更する

てことは、今の画面の表示箇所がページの一番上だった場合にのみz-indexをグローバルナビより上にして、一番上以外の時には下にすれば良い訳ですね

さて、それをどうするかですが、今回はjQueryで実装してみようと思います。お手軽です。

スクロールを監視する

まずはユーザーのスクロール動作を監視します。

<script>
$( function( ) {
  // ↓これで「スクロールした際に処理をする」が実装できる
  $( window ).scroll( function( ) {
    // ここに処理を入れますよ
  });
});
</script>

ページの際上だった場合の条件分岐

次に、ページが一番上か否かの条件分岐を書きます。

「セレクタ.scrollTop()」を使うと、セレクタの元々の位置からどれだけスクロールしたかが取得できます。

なので、それをif文に書いてページの一番上か否かを判定します

<script>
$( function( ) {
  // ↓これで「スクロールした際に処理をする」が実装できる
  $( window ).scroll( function( ) {
    
    // 1ピクセルでもスクロールしている場合
    if $( window ).scrollTop() > 0 ) {
      // z-indexを下げる
      $( "#mainvisual" ).css( "z-index", "0" );
    } else {
      // z-indexを上げる
      $( "#mainvisual" ).css( "z-index", "100000" );
    }
  });
});
</script>

完成!

これで完成です。

scroll004

やったね!

おわりに

本当は上で書いたようにある程度スクロールすると固定配置になる方法を書きたかったんですが思いの外時間がかかったので、それはまたいつ書くかもです。

こうやってJSを使うと、cssだけでは絶対に出来ないと思っていたことが簡単に出来てしまうことがあって便利ですね。

そして、僕は今までは昔の名残(Gmail以前はJSって嫌われてましたよね)があったことと、イマイチよく分からない言語だなぁという印象だったことで今まで関わってこなかったんですが、今では必須みたいな言語になってますし、実際に使わない理由はない言語になっていると感じます。

僕も学び初めなのですが、すでに、どういったことが出来るのか、どう書けばより高速か、どういうツールを使うと効率的か、どういったライブラリを使えば良いか、など、知れば知るほどに深い言語だなぁという認識に変わりました。

ただ、やはり僕的にはとっつきにくい言語だなぁ、という印象はあったので、もし僕以外にも、JSを敬遠しているWeb制作者(主にフロントの方)がいるなら、まずはjQueryから始めて、徐々にJS自体を知っていく、みたいな流れで憶えてみては如何でしょうか。

他にこんな事も書いてます

FBでコメント

15個のコメント

  1. 書きましたー JQueryでスクロールの量によって要素を変化させる方法:STACKSTOCK http://t.co/4EryRCuU

  2. @wJSnews より:

    SS | JQueryでスクロールの量によって要素を変化させる方法 http://t.co/3JNAtwsr

  3. SS | JQueryでスクロールの量によって要素を変化させる方法 最近小ネタで攻める姿勢を微塵も崩そうともしない僕ですが、みなさん元気です? 今回は案件で対応した点で、ちょっとおもしろげな対応をしたので誰かの役に立つかなぁと… http://t.co/HJRxCu5P

  4. SS | JQueryでスクロールの量によって要素を変化させる方法 http://t.co/AvtnPntk

  5. SS | JQueryでスクロールの量によって要素を変化させる方法 http://t.co/65TLEClg

  6. SS | JQueryでスクロールの量によって要素を変化させる方法 http://t.co/vAUgVCwR

  7. @jquery_j より:

    SS | JQueryでスクロールの量によって要素を変化させる方法 http://t.co/kZutctw1 #jqueryjp

  8. @css_j より:

    SS | JQueryでスクロールの量によって要素を変化させる方法 http://t.co/jAS2m3IU #css #web

  9. [*jQuery][*tips] / “SS | JQueryでスクロールの量によって要素を変化させる方法” http://t.co/ai9Yz6ol

  10. @typista より:

    ぽけったー JQueryでスクロールの量によって要素を変化させる方法 http://t.co/fNW6EgvO

  11. @cocoa_anpan より:

    SS | JQueryでスクロールの量によって要素を変化させる方法 http://t.co/lYCFldcr

  12. @RSS_hateb_Roy より:

    javascript: SS | JQueryでスクロールの量によって要素を変化させる方法 http://t.co/CYDMyoOn

  13. SS | JQueryでスクロールの量によって要素を変化させる方法 http://t.co/qBKaDLNR

  14. @syarihu より:

    SS | JQueryでスクロールの量によって要素を変化させる方法 – http://t.co/POTFm5H9

  15. @chienavi より:

    SS | JQueryでスクロールの量によって要素を変化させる方法 http://t.co/C7pcSNUA @anticyborgさんから

トラックバック/ピンバックはありません。