[jQuery]ある高さまでスクロールした時ヘッダーの文字の色や背景色を変える

固定headerをある高さまでスクロールすると、ヘッダーの文字または背景色が変化する実装について解説。

ピクセルなどで位置で色を変えるように指定し、ある高さまでスクロールすると、cssで指定したクラスを追加したり除去したりするJavaScriptのコードも紹介。

まずは下記に、固定ヘッダーをスクロールすると、文字が変わる例を共有する。

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');
　}
});

今回はjQueyを使用した。分解してみていく。

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

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

if (400 < jQuery(this).scrollTop()){
  処理１
} else {
　処理２
}

この部分で、「400px以上スクロールしたら、「処理１」を行ってね、そうでなければ処理２を行ってね」という形で記述する。

「on()」は「なんらかのイベント」が発生した時に何か処理をおこなうという合図

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

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

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

今回は、

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

で設定。

今回はイベント名をscrollで記述する。

jQuery(window).on('scroll', function () {

よって意味としては、「スクロールイベントが発生したら、function(){...}の中身を処理してね」と命令している。

.addClass()・.removeClassでCSSのクラスを追加・除去する

.addClass()はCSSで用意したクラスを付け足すことができる。

逆に.removeClass()で、CSSのクラスを取り除くこともできる。

なので今回の例でいくと、

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

「もし400px以上スクロールしたら、CSSで設定された change-colorクラスをheader クラスに適用してね、スクロールしてなかったら、change-colorクラスをheaderクラスから外してね」

というような意味になる。

文字以外にもアイコンや背景色などの色の変更が可能

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

左上のアイコンに注目。

以上がある高さまでスクロールした時にヘッダーの色をかえる方法となる。

ヘッダーあれこれ書いてます

他にも、ヘッダーの作り方について共有。

下記にHTMLとCSS、Javascriptを使ったwebサイトの作り方についてまとめてます。