固定したヘッダーのロゴの色が白の場合、ファーストビューが色のついた背景であれば問題ありませんが、メインコンテンツの背景が白だったら背景と同化してしまうという事があります。
この場合、スクロールしてファーストビューを過ぎたら、ロゴの色を変えるという対処方法があります。
実務でも何度かあったので、今回の記事でご紹介しておきます。
- 完全無料
- 30日間でWeb制作を学べる
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 毎日人数制限ありの先着制
(有料になっていたらすいません🙇♂️)
jQueryを使ってスクロールしたらヘッダーロゴの画像切り替えや色を変える方法
まずは、jQueryを使用するのでjQuery本体を読み込む必要があります。
jQueryの使い方はこちらの記事を参照下さい。
【初心者向け】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-header
にheaderColorScroll
という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;
で重ねておいて、opacity
とtransition
を使えば出来るかと思います。
まとめ
今回は、jQueryを使ってスクロールしたらヘッダーの画像切り替えや色を変化させる方法を解説しました。
ロゴの切り替えは実務でも何度か実装したことがあるので、ぜひ実装できるようになっておきましょう。
以上になります。