Technology

[jQuery] ある高さまでスクロールした時にヘッダーの色をかえる。

ある高さまでスクロールした時に、ヘッダーの色を変えるようにする。

See the Pen test for changing color on header by Shotaro Kamimura (@shotarokamimura) on CodePen.


javascriptの書き方

javascriptの記述はこちら。

jQuery(window).on('scroll', function () {
　if (400 < jQuery(this).scrollTop()) {
　　jQuery('.header').addClass('change-color');
　} else {
　　jQuery('.header').removeClass('change-color');
　}
});


分解してみていく。


「scrollTop()」

「scrollTop()」でスクロールの位置を取得できる。


「on()」

「on()」は画面がスクロールされた時やマウス操作、キーボード入力など、「なんらかのイベント」が発生した時に何か処理をおこない時に記述する。

書き方は下記のようになる。

対象要素.on( イベント名, セレクタ, データ ,関数 )


今回は、

  • イベント名→'scroll'
  • セレクタとデータ→なし
  • 関数→ function() { ... }

で設定。


.addClass()・.removeClass

400px以上スクロールすると、.addClass()によって、CSSで設定された change-colorクラスがheader クラスに適用される。

それ以外は、.removeClass()によって、change-colorクラスがheaderクラスから外されるようになっている。


文字以外にも色の変更は可能

もちろん今回の例のように、文字を変えることもできるし、Fontawesomeのアイコンや、背景の色なども変えることができる。

左上のアイコンに注目。

-Technology