固定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サイトの作り方の関連記事
下記の記事でHTML・CSSをウェブ上に表示させる方法からヘッダーやカラム作成、レスポンシブ対応、画像の扱いなど、HTML・CSSでのサイトの作り方をまとめている。
● HTMLとCSS、Javascriptを使ったwebサイトの作り方まとめ
コンピュータの全体像
ウェブサイト作成という分野において、コンピュータの全体像を把握することも大切だ。コンピュータの構造、ネットワークや通信プロトコル、ウェブ技術など、ベースとなる知識を持っていることでウェブサイトの制作や運営においてより高度な問題解決や効率的な開発が可能となる。
下記にコンピューターの基礎やITの全体像についてもまとめている。
コメントを残す