2022/2/20 （更新日: 2022/2/21）

【jQuery】一定の高さまでスクロールしたらヘッダー背景色を変更する方法

Coding

ある高さまでスクロールしたら固定ヘッダーの背景色を変えたいんだけど、どうすればいいの？

そんな疑問にお答えします。

ファーストビューは色のついた背景画像なのでヘッダーの白文字は見やすいが、メインコンテンツの背景も白なのでスクロールしていくと見えなくなる、というケースがあります。

この場合にはファーストビューを過ぎたらヘッダーの背景色を変える必要があります。

どのように実装するか一緒に見ていきましょう。

1 一定の高さまでスクロールしたらヘッダー背景色を変更する
2 コード解説

一定の高さまでスクロールしたらヘッダー背景色を変更する

まず今回のゴールを確認します。

スクロールしていき、ファーストビューを過ぎた時点でヘッダーの背景に色をつけます。

コード解説

See the Pen
スクロールしてヘッダー背景色変更 by toshi (@toshi78)
on CodePen.

HTML

<header class="header js-header">
<!-- 左右にロゴとナビゲーション配置 -->
</header>
<div class="fv">
<!-- ファーストビュー -->
</div>
<section class="about">
<!-- Aboutセクション -->
</section>

まずヘッダーがあって、次にファーストビューが来るという一般的な骨組みです。

ヘッダー部分のコードは以前の解説記事からそのまま持ってきています。

【HTML/CSS】基本的なヘッダーの作り方【初心者でもわかるように徹底解説】

唯一追加しているところは、 js-header というクラスです。

この部分の色をjQueryによって変えたいので、わかりやすくするために追加しています。

これを図にすると以下のようになります。

ヘッダーの背景色を変える

背景色を変えたいヘッダー部分が .js-header 、ファーストビューが .fv です。

この要素をjQueryで操作します。

CSS

.header.change-color {
  background-color: #00cc99; //スクロールしたあとのヘッダー背景色
  transition: 0.3s;　
}

ここで注目すべきは .change-color というクラスです。

.headerに「.change-colorというクラスが付与されたとき背景色を#00cc99にする」という指定をしておきます。

また色の切り替わりをなめらかに作動させるためにtransitionもかけています。

jQuery

$(function () {
  $(window).on('scroll', function () {
      if ($('.fv').height() < $(this).scrollTop()) {
          $('.js-header').addClass('change-color');
    } else {
          $('.js-header').removeClass('change-color');
    }
  });
});

最後にjQueryを見ていきます。

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

「on()」は「なんらかのイベント」が発生した時に何か処理をおこなうという合図です。

よって上記は、「スクロールイベントが発生したら、function(){}の中身を処理する」という意味です。

次にそのfunction(){}の中身に行う処理を記述します。

💡ポイント！　

scrollTop()は、ブラウザの画面をスクロールした時の位置（スクロール量）を取得できるメソッド

if ($('.fv').height() < $(this).scrollTop()) {

上記のif文は、「スクロール量がファーストビューの領域を超えた場合」という意味です。

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

よってこの処理は、「ファーストビューを超えて下にスクロールしたら、.js-headerに.change-colorクラスを付与し、そうでなければ.js-headerから.change-colorクラスを外す」という内容になります。

以上です。