ある高さまでスクロールした時に、ヘッダーの色を変えるようにする。
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のアイコンや、背景の色なども変えることができる。
左上のアイコンに注目。