2020.11.04

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

こんにちは。

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

 

 

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

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

 

 

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

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

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

 

☑️ デモページ

See the Pen abZKjQZ by ゆーじろー (@yujiron) on CodePen.dark

 

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制作の幅も広がるので是非試してみてください。

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

それでは。

CONTACT
RECRUIT

お仕事の依頼・ご相談は
こちらからお問い合わせください。

私たちと働いていただける方を募集しています。