今回は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を一定間スクロールしたら背景色を変える方法」でした。
