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

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

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

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

やりたかったこと

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

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

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

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

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

非常に残念ですね。

ページの一番上の時とちょっとでもスクロールしたときで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>

完成！

これで完成です。

やったね！

おわりに

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

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

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

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

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