例えばページを開いた時点でのヘッダーの高さが100pxだとします。
これをある程度スクロールしたら60pxに低くして少し目立たないようにしたい場合があります。
今回はファーストビューを超えるまでは変化なしで、超えたら以下のように変化させてみたいと思います。
- 高さを低くする
- 背景色を変更（白 → 水色）
- 背景色の透過率を変更（少し濃くする）
（有料になっていたらすいません🙇♂️）
特定の位置までスクロールしたら固定ヘッダーの色やサイズを変更する方法
まずはサンプルを見てみましょう（スクロールして下さい）
See the Pen
特定の位置までスクロールしたらヘッダーの色やサイズを変更 by junpei (@junpei-sugiyama)
on CodePen.
ファーストビューを過ぎるとヘッダーの色やサイズが変わりました。
今回はjQueryを使うので、jQueryを使ったことがない人はこちらの記事を参照下さい。
-
【初心者向け】jQueryとは？CDNを使った本体の読み込み方も分かりやすく解説
続きを見る
コード解説
HTMLはこちらになります。
<header class="header js-header">
<nav>
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
</ul>
</nav>
</header>
<div class="mv js-mv">
<img
src="画像パス"
alt=""
/>
</div>
<section class="content">
<p>
テキストが入ります。
</p>
<p>
テキストが入ります。
</p>
<p>
テキストが入ります。
</p>
</section>特に変わったところはありませんが、jQuery用のclassを付けています（『js-』というclass）
CSSはこちらです（重要なものだけ）
.header {
background-color: rgba(255,255,255,.6);
display: flex;
justify-content: center;
padding: 40px 0;
position: fixed;
transition: padding .5s, background-color .5s; /* 背景色と高さをじんわり変更 */
width: 100%;
}
/* ファーストビューを過ぎたあとのヘッダー */
.header.transform {
background-color: rgba(204,255,255,.9); /* 背景色変更 */
padding: 20px 0; /* 高さ変更 */
}.header.transformがスクロールしてファーストビューを過ぎたあとのスタイルになります。
ヘッダーの背景色、透過率、高さはbackground-color:とpaddingで変更しています。
そしてjQueryはこちらです。
$(function () {
// スクロールを開始したら
$(window).on("scroll", function () {
// ファーストビューの高さを取得
mvHeight = $(".js-mv").height();
if ($(window).scrollTop() > mvHeight) {
// スクロールの位置がファーストビューより下の場合にclassを付与
$(".js-header").addClass("transform");
} else {
// スクロールの位置がファーストビューより上の場合にclassを外す
$(".js-header").removeClass("transform");
}
});
});4行目と5行目でファーストビューの高さを取得して、スクロールの位置がファーストビューより上か下かでclassの付け外しをしています。
そのclassのありなしでヘッダーのスタイルを変更しています。
スクロールを開始したらヘッダーの色やサイズを変更
先ほどは『ファーストビューを過ぎたら』でしたが、スクロール開始直後に変更することも可能です。
その方法はこちらの記事を参考に実装してみます。
-
【jQuery】スクロール開始でイベントを発火させる方法
続きを見る
こちらがサンプルになります。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
コード解説
HTMLとCSSは先ほどと同じです。
そしてjQueryはこちらになります。
$(function () {
// スクロールを開始したら
$(window).on("scroll", function () {
if ($(this).scrollTop() > 0) {
// ページトップ以外の場合classを付与
$(".js-header").addClass("transform");
} else {
// ページトップの場合classを外す
$(".js-header").removeClass("transform");
}
});
});『スクロール開始したら』というのは『ページトップ以外』と同じ意味になります。
そしてページトップに戻ればヘッダーも元に戻ります。
以上になります。
-
CSSだけで途中から固定するスティッキーヘッダーを作る方法【サンプル付きで解説】
続きを見る
