BLOG

このブログは間もなく「Webis Tech LABO.」に移設予定です。
Webis Tech LABO.はこちら

2020.11.04

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

こんにちは。

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

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

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

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

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

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

☑️ デモページ

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

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>

<h1>プログラミング</h1>

</div>

<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;
    }
}

100

101

102

103

104

105

106

107

108

109

110

/* 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'); } });

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

まとめ

如何でしたでしょうか？

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

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

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

それでは。

BLOG LIST

CONTACT
RECRUIT

CONTACT

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

RECRUIT

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

BLOG

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

HTML

HTMLの解説

CSS

JavaScript

JavaScriptの解説

まとめ

CONTACTRECRUIT

CONTACT
RECRUIT