jQuery Web制作

【jQuery】スクロールしたらヘッダーの画像切り替えや色を変化させる方法

2020年12月3日

※ 当サイトではアフィリエイト広告を利用しています

スクロールしていって、ファーストビューを過ぎたらヘッダーのロゴの色を変える方法ない?

固定したヘッダーのロゴの色が白の場合、ファーストビューが色のついた背景であれば問題ありませんが、メインコンテンツの背景が白だったら背景と同化してしまうという事があります。

この場合、スクロールしてファーストビューを過ぎたら、ロゴの色を変えるという対処方法があります。

実務でも何度かあったので、今回の記事でご紹介しておきます。

じゅんぺいブログは、Web制作コーディングWordPress制作)の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください!
完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 完全無料
  • 30日間でWeb制作を学べる
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 毎日人数制限ありの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
(有料になっていたらすいません🙇‍♂️)

\ 完全無料 /

ZeroPlus Gate公式サイト

毎日先着制!

jQueryを使ってスクロールしたらヘッダーロゴの画像切り替えや色を変える方法

まずは、jQueryを使用するのでjQuery本体を読み込む必要があります。

jQueryの使い方はこちらの記事を参照下さい。

あわせて読みたい
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説
【初心者向け】jQueryとは?CDNを使った本体の読み込み方も分かりやすく解説

続きを見る

それでは、最初に今回の完成形を見てみます。

See the Pen
スクロールしてmvを過ぎたら色など変更
by junpei (@junpei-sugiyama)
on CodePen.

ロゴは最初白色ですが、スクロールしていってファーストビューを過ぎたら色が変わっています。

それでは簡単に解説していきます。

 

HTMLのコード

HTMLの書き方はこちら。

<header class="header js-header">
  ロゴ
</header>
<div class="mv">
  ファーストビュー
</div>
<div class="contents">
  メインコンテンツ
</div>

特に変わった所はありませんが、jQueryを使う箇所については『js-』を付けたclass名を追記しています。

今回で言えば、js-headerですね。

class名のheaderを使っても出来ますが、js-headerとする事で『ここはjsを使っているな』とすぐ分かります。

 

CSSのコード

CSSの書き方はこちら。

.header {
  color: #fff;
  transition: color 0.4s ease-out;
}
/* スクロールしたらヘッダーメニューのフォントカラー変更 */
.header.headerColorScroll {
  color: #ff6347;
  transition: color 0.4s ease-out;
}

今回の実装で重要な箇所だけ書いています(全体を見たい場合は最初のCodePenでご確認下さい)。

まず、最初のロゴの色は白(#fff)となり、スクロールしていってファーストビューを過ぎた時の色は#ff6347となっています。

.headerColorScrollだけでも大丈夫ですが、.headerを付ける事で、.header.headerColorScrollが付与された時の動作だなと分かります。

また、色の切り替わりが瞬間的に切り替わるのではなく、ふんわり変化させたい場合はtransitionを使います。

今回は分かりやすくする為に0.4秒にしましたが、もう少し短く0.2秒くらいでもいいかも知れません。

 

jQueryのコード

jQueryの書き方はこちら。

// スクロールするとロゴの色変更
$(function () {
  $(window).on("scroll", function () {
    const sliderHeight = $(".mv").height();
    if (sliderHeight - 30 < $(this).scrollTop()) {
      $(".js-header").addClass("headerColorScroll");
    } else {
      $(".js-header").removeClass("headerColorScroll");
    }
  });
});

スクロールしていき、.mv(ファーストビュー)を過ぎたら.js-headerheaderColorScrollというclassを付与し、そうでなければ.js-headerからheaderColorScrollというclassを外すという内容です。

ここでやっていることは、スクロールしていって指定した領域を過ぎたらclassを付与するという事なので、今回は色の変更ですがCSS側でフォントのサイズを変えたり、ロゴが画像の場合は画像を2種類用意して、display: block;display: none;を使えば画像を切り替える事も可能です。

また4行目の30という数値ですが、色の変化が少し早い、または少し遅い場合にこの数値を変える事で切り替わりのタイミングを調整出来ます。

 

サンプル(デモ)

それでは、最後にもう一度完成形を見てみます。

See the Pen
スクロールしてmvを過ぎたら色など変更
by junpei (@junpei-sugiyama)
on CodePen.

これは実務でも役に立つと思うので、ぜひ使えるようになっておきましょう。

 

ロゴ画像切り替えの場合

ロゴを画像にした時の切り替えは、以下のようになります。

See the Pen
スクロールしてmvを過ぎたら色など変更(ロゴ画像)
by junpei (@junpei-sugiyama)
on CodePen.

最初に表示するロゴ画像は、スクロールしたらjQueryでclassを付与してdisplay: none;にして非表示にします。

スクロールした後に表示する画像は最初はdisplay: none;で非表示にしておき、スクロールしたらjQueryでclassを付与してdisplay: block;にして表示させます。

ロゴ画像に関してはdisplayで切り替えているためアニメーションなしですが、フェードで切り替えたい場合はロゴをposition: absolute;で重ねておいて、opacitytransitionを使えば出来るかと思います。

まとめ

今回は、jQueryを使ってスクロールしたらヘッダーの画像切り替えや色を変化させる方法を解説しました。

ロゴの切り替えは実務でも何度か実装したことがあるので、ぜひ実装できるようになっておきましょう。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX(旧Twitter)などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ!

 

  • この記事を書いた人

じゅんぺい

37歳からWeb制作とブログ開始。Web制作歴5年目でコーディングとWordPressオリジナルテーマ制作が中心。これまで120件以上を納品。当ブログ月間最高15万PVで、370記事以上はWeb制作の技術記事。コンテンツ販売→累計売上1200万円&1500部超え。X(旧Twitter)フォロワー7200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

-jQuery, Web制作