固定headerをスクロールすると背景色が変わる実装【JS】

こんにちは。

大学4回生で現在WEBコーダーとして働いているYUJIROです。

 

 

「headerを固定にして、一定距離スクロールすると、背景色を変えたい」

「しかし、headerをスクロールして背景色を変えるには、どうすればいいだろう?」

 

 

この記事を読んでいる方は、このような悩みがあるのではないでしょうか?

今回はそんな方に向けて、「固定headerをスクロールすると、背景色が変わる実装【JS】」について解説していきます。

HTML・CSS・JavaScriptの順でコードの紹介をしていくので、興味ある方は是非参考にしてください。

 

☑️ デモページ

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”abZKjQZ” default_tab=”css,result” user=”yujiron”]See the Pen abZKjQZ by ゆーじろー (@yujiron) on CodePen.[/codepen_embed]

 

HTML

 

HTMLの解説

・固定headerをまずは作成しました。

・そしてh2タグの下にある、改行を表す「brタグ」は、スクロールして固定headerの色の変化がわかるように高さを持たせました。

・後でJavaScriptを書く際に、「jQuery」を使う予定にしています。

なので、bodyタグのすぐ上にjQueryのCDNコードを入れておきましょう。

これがないと、jQueryを反映させることが出来ませんので。

 

CSS

 

・まずは「◎ここから」と書かれた部分までに、リセットCSSコードを入れました。これを入れることで、ブラウザがデフォルトで持っている余白などを消してくれます。

・そして「.header」に

position: fixed;

→headerをスクロールしても固定にしたままにする
width: 100%;

→「position: fixed;」を書いた際には、「width: 100%;」も入れておきましょう。これがないと、横一杯にheaderが広がらなくなります。

z-index: 100;

→固定headerが一番上の要素になるように、数字を記載しておきましょう。数字は大きいほど、上の要素になります。

transition: all .5s;

→固定headerがスクロールした際に、0.5秒で背景色が変わるように、アニメーションを設定しました。

 

・「.header.change-color」の「.change-color」は、スクロールした際に「.header」につけるclassになります。

「.header.change-color」の中に、スクロールしたら表示したい色を入れましょう。

 

JavaScript

 

JavaScriptの解説

・jQueryを今回は使います。

・「.header」分の高さまでスクロールすると、「.header」に対して「change-color」のclassがつく。つまりここで固定headerの背景色が変わります。そして「.header」の高さ以下の場合は、「change-color」を外す。つまり背景色が元に戻る。

 

jQuery( window ).on( ‘scroll’, function() {  if ( 300 < jQuery( this ).scrollTop() ) {     jQuery( ‘.header’ ).addClass( ‘change-color’ );  } else {    jQuery( ‘.header’ ).removeClass( ‘change-color’ );  }});

→このように書くと、300pxスクロールしたときに、固定headerの背景色を変えることが出来ます。300pxの部分はお好きな数値を入れてもらえると。

 

まとめ

如何でしたでしょうか?

スクロールすると固定headerの色が変わる実装は、頻繁にWEBサイトで使われています。

今回の実装が出来るようになると、WEB制作の幅も広がるので是非試してみてください。

また来週の水曜日に技術ブログを更新していきます。

それでは。

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事