固定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サイトの作り方まとめ
このページでは、HTMLとCSS、Javascriptを使ったwebサイトの作り方についてまとめていく。 Webサイトの仕組み まずはwebサイトの仕組みなどをわかっておくと、今後の準備がかなり楽にな ...
続きを見る
また、コンピューターについての全体像も把握しておくと、web制作の理解にも役立つ。
-
-
Screen-Shot-2021-06-11-at-11.45.16
続きを見る