【JS】固定headerを一定間スクロールしたら背景色を変える方法

JavaScript

今回はJavaScript(jQuery)を使って、「固定headerを一定間スクロールしたら背景色を変える方法」を紹介します。

【JS】固定headerを一定間スクロールしたら背景色を変える方法

完成形はこちら。

ピンクのファーストビューまでスクロールしきると、固定headerの背景色が赤に変わることがわかるでしょう。

そして、一番上までスクロールすると赤い背景色が消えます。

jQueryを使う準備

今回はjQueryを使っていきます。

以下のコードをbodyの閉じタグ直前にコピペしてください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

HTML

<!-- header -->
<header class="header">
    <div class="header__inner">
        <div class="header__title">
            <h1>タイトル</h1>
        </div>
        <div class="header__nav">
            <ul>
                <li><a href="">ナビメニュー</a></li>
                <li><a href="">ナビメニュー</a></li>
                <li><a href="">ナビメニュー</a></li>
            </ul>
        </div>
    </div>
</header>

<!-- first-v -->
<div class="first-v">
    <p>ファーストビュー</p>
</div>

<!-- wrap -->
<div class="wrap">
    <p>スクロールするとheaderの背景色が変わります</p>
</div>
<div class="wrap">
    <p>スクロールするとheaderの背景色が変わります</p>
</div>

headerとfirst-v、そして下へスクロールするためにwrapの要素を作りました。

CSS

/* header */
.header {
    padding: 20px 0;
    position: absolute;
    position: fixed;
    max-width: 100%;
    width: 100%;
    z-index: 10;
    box-sizing: border-box;
    transition: background-color .5s, color .5s;
}
.header__inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header__title h1 {
    font-size: 25px;
}
.header__nav ul {
    display: flex;
}
.header__nav ul li:not(:first-child) {
    margin-left: 50px;
}
.header__nav ul li a {
    font-size: 18px;
    text-decoration: none;
    color: black;
}

/* first-v */
.first-v {
    padding-top: 65px;
    position: relative;
    background-color: pink;
    height: calc(100vh - 65px);
}
.first-v p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3.5vw;
}

/* wrap */
.wrap {
    position: relative;
    height: 100vh;
}
.wrap p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2vw;
    line-height: 1.5;
}

/* headerの色を変える */
.header.change-color {
    background-color: red;
}

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

ポイントだけ解説していきます。

◎2行目〜11行目

「position: fixed;」をheaderに指定して固定にします。

そして「transition: background-color .5s, color .5s;」でアニメーションをつけます。

◎64行目〜66行目

headerに対して「.change-color」のクラスがついた時に、背景色が赤色になるようにします。

「.change-color」に関しては、後でJavaScriptで設定していきます。

JavaScript

// headerをスクロールすると、色が変わる
jQuery(window).on('scroll', function () {
    if (jQuery('.first-v').height() < jQuery(this).scrollTop()) {
        jQuery('.header').addClass('change-color');
    } else {
        jQuery('.header').removeClass('change-color');
    }
});

first-vクラスの高さ以上までスクロールした時に、headerに対して「.change-color」クラスをつけます。

つまり、背景色が赤色になります。

そして、first-vクラスの高さまでスクロールしていない場合は「.change-color」クラスを外すので、背景色の赤色が消えます。

まとめ

以上が、JavaScript(jQuery)を使って、「固定headerを一定間スクロールしたら背景色を変える方法」でした。