[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()){
  処理1
} else {
 処理2
}

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

「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サイトの作り方についての記事をまとめた。


HTMLとCSS、Javascriptを使ったwebサイトの作り方まとめ

続きを見る


また、コンピューターについての全体像も把握しておくと、web制作の理解にも役立つ。


コンピューターサイエンスとITの全体像

続きを見る


Related posts