2020-11-04

固定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

<header class="header">
        <div class="header__inner">
            <div class="header__title">
                <h1>プログラミング</h1>
            </div>
            <nav class="header__nav">
                <ul>
                    <li>
                        HTML
                    </li>
                    <li>
                        CSS
                    </li>
                    <li>
                        JavaScript
                    </li>
                    <li>
                        PHP
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    <h2>下に300pxスクロールすると、headerの背景色が「ピンク」に変わります。</h2>
    
    <h3>スクロールすると、固定headerの背景色が「ピンク」に変わりましたね！</h3>

HTMLの解説

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

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

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

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

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

CSS

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/* ◎ここから */
* {
    box-sizing: border-box;
}

body {
    text-align: center;
}


/* header */
.header {
    padding: 30px;
    transition: all .5s;
    position: fixed;
    width: 100%;
    z-index: 100;
}

.header__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header__nav ul {
    display: flex;
}

.header__nav ul li {
    margin-left: 30px;
}

.header.change-color {
    background-color: pink;
}

h2,
h3 {
    padding: 200px 20px;
    line-height: 1.5;
}

/* header */


/* レスポンシブ */
@media (max-width: 600px) {
    .header__nav {
        display: none;
    } 

    h2,
    h3 {
        font-size: 12px;
    }
}

・まずは「◎ここから」と書かれた部分までに、リセット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

'use strict'; 

jQuery(window).on('scroll', function () {

 if (jQuery('.header').height() < jQuery(this).scrollTop()) { 
jQuery('.header').addClass('change-color'); }
 else {
 jQuery('.header').removeClass('change-color'); } });

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の部分はお好きな数値を入れてもらえると。