スクロールすると背景色が変わる固定ヘッダーを作る方法
ページをスクロールすると背景色が変わる固定ヘッダーを、HTML・CSS・JavaScriptで作る方法を紹介します。このサンプルでは、基本のヘッダーと同じ「Sample Site」のサイト名と「ホーム」「サービス」「会社概要」「お問い合わせ」のナビゲーションを配置し、ヘッダーをページ上部へ固定します。ページ最上部では白色の背景で表示し、下へスクロールすると背景色がブルーへ切り替わります。
HTMLではサイト名とナビゲーションを配置し、CSSでは基本のヘッダーのレイアウトを維持しながら、通常時とスクロール時の背景色や文字色を設定します。JavaScriptではページのスクロール位置を判定し、スクロールしている場合だけヘッダーへクラスを追加します。クラスが追加されるとヘッダーの背景色が変わり、サイト名とナビゲーションも背景に合わせて白色へ切り替わります。ページ最上部まで戻るとクラスが外れ、元の白いヘッダーへ戻ります。
コーポレートサイト、サービスサイト、会員サイト、ECサイトなど、スクロール中もナビゲーションを表示しながら、現在のスクロール状態を見た目の変化で分かりやすくしたい場合に利用できます。サイト名、メニュー名、リンク先はHTMLから変更でき、CSSでは通常時とスクロール時の背景色、文字色、余白、文字サイズ、色が切り替わる速度などを調整できます。また、画面幅が狭い場合はサイト名とナビゲーションを縦方向へ切り替えるため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
Sample Site
このエリアをスクロールすると、固定ヘッダーの背景色が変わります。
デモ内を下へスクロールすると固定ヘッダーがブルーへ変わり、上まで戻すと白色へ戻ることを確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>スクロールすると背景色が変わる固定ヘッダー</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ページ上部に固定するヘッダー -->
<header class="scroll-color-header_header">
<!-- ヘッダーの内側 -->
<div class="scroll-color-header_inner">
<!-- サイト名 -->
<p class="scroll-color-header_logo">
Sample Site
</p>
<!-- メインナビゲーション -->
<nav class="scroll-color-header_nav" aria-label="メインナビゲーション">
<!-- hrefと表示文字はサイトに合わせて変更してください -->
<a href="#">ホーム</a>
<a href="#">サービス</a>
<a href="#">会社概要</a>
<a href="#">お問い合わせ</a>
</nav>
</div>
</header>
<!-- ページ本文 -->
<main class="scroll-color-header_content">
<!-- ページタイトル -->
<div class="scroll-color-header_content-title">
ページタイトル
</div>
<!-- ページの説明文 -->
<p class="scroll-color-header_content-text">
ページをスクロールすると、固定ヘッダーの背景色が変わります。
</p>
</main>
<!-- スクロール位置を判定するJavaScript -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではサイト名、ナビゲーション、ページ本文を作成し、CSSでは固定ヘッダーのレイアウト、通常時とスクロール時の背景色、文字色、レスポンシブ表示を設定します。JavaScriptではページのスクロール位置を判定し、指定した位置を超えた場合にis-scrolledクラスを追加することで、固定ヘッダーの背景色を切り替えます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはヘッダーとページ本文を構成するファイルです。「Sample Site」のサイト名、「ホーム」「サービス」「会社概要」「お問い合わせ」のナビゲーション、ページタイトル、説明文を変更できます。各ナビゲーションのhrefを変更すると、実際のページへのリンクを設定できます。
style.cssは固定ヘッダーとページ本文のデザインを設定するファイルです。通常時のヘッダーは白色で表示し、.scroll-color-header_header.is-scrolledではスクロール後の背景色を#2563ebへ変更します。背景色に合わせてサイト名とナビゲーションの文字色も白色へ切り替わります。
script.jsはページのスクロール位置を判定するファイルです。scrollColorHeaderThresholdで指定した位置を超えるとis-scrolledクラスを追加し、指定位置まで戻るとクラスを削除します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。index.htmlからstyle.cssとscript.jsを読み込む構成になっているため、3つのファイルを配置したあとsample/index.htmlをブラウザで開いてください。ページを下へスクロールすると固定ヘッダーの背景色がブルーへ変わり、ページ最上部まで戻ると白色へ戻ります。
カスタマイズできる内容
index.htmlではサイト名、ナビゲーションの表示文字とリンク先、ページタイトル、説明文を変更できます。style.cssではヘッダーの通常時とスクロール時の背景色、サイト名やナビゲーションの文字色、余白、文字サイズ、リンク同士の間隔、色が切り替わる速度などを変更できます。スクロール後の背景色は.scroll-color-header_header.is-scrolledのbackgroundを変更して調整できます。
数値調整
style.css
top:0;
固定ヘッダーの上端からの位置です。0では画面の一番上に固定され、値を大きくすると画面上端から離れた位置に固定されます。
z-index:10;
ヘッダーの重なり順です。値を大きくすると、ほかの要素より手前に表示されやすくなります。
padding:28px 40px;
ヘッダーの内側余白です。上下の28pxを大きくするとヘッダーが高くなり、左右の40pxを大きくすると画面端との間隔が広がります。
border-bottom:1px solid #e5e7eb;
ヘッダー下側の枠線です。1pxを大きくすると線が太くなり、小さくすると細くなります。
box-shadow:0 4px 18px rgba(15,23,42,.05);
ヘッダー下側の影です。4pxを変更すると影の縦方向の位置が変わり、18pxを変更するとぼかし範囲が変わります。.05を大きくすると影が濃くなり、小さくすると薄くなります。
transition:background-color .3s ease, border-color .3s ease;
背景色と枠線色が切り替わる時間です。0.3秒で変化し、値を大きくするとゆっくり、小さくすると速く切り替わります。
gap:40px;
サイト名とナビゲーションの間隔です。値を大きくすると両者の間隔が広がり、小さくすると近くなります。
max-width:1200px;
ヘッダー内側の最大横幅です。値を大きくするとサイト名とナビゲーションを配置できる範囲が広がり、小さくすると中央寄りになります。
font-size:20px;
サイト名の文字サイズです。値を大きくするとサイト名が大きくなり、小さくすると控えめになります。
transition:color .3s ease;
サイト名とナビゲーションの文字色が切り替わる時間です。0.3秒で変化し、値を大きくするとゆっくり、小さくすると速く切り替わります。
gap:8px 24px;
ナビゲーションリンク同士の間隔です。8pxは上下方向、24pxは左右方向の間隔です。値を大きくするとリンク同士の間隔が広がります。
font-size:14px;
ナビゲーションリンクの文字サイズです。値を大きくすると文字が大きくなり、小さくするとコンパクトになります。
min-height:900px;
ページ本文の最低高さです。値を大きくするとページが長くなり、スクロールできる距離も長くなります。
padding:80px 24px;
ページ本文の内側余白です。上下の80pxを大きくするとヘッダーと本文内容の間隔が広がり、左右の24pxを大きくすると画面端との間隔が広がります。
margin:0 0 12px;
ページタイトルの下側余白です。12pxを大きくするとタイトルと説明文の間隔が広がり、小さくすると近くなります。
font-size:28px;
ページタイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると控えめになります。
line-height:1.8;
ページ説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
script.js
const scrollColorHeaderThreshold = 0;
背景色を切り替えるスクロール位置です。0ではページ最上部からスクロールを始めると背景色が変わります。値を大きくすると、そのスクロール位置を超えてから背景色が切り替わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%;によってヘッダーを画面幅いっぱいに表示し、max-width:1200px;によって内側の内容が必要以上に広がらないようにしています。画面幅が768px以下になると、サイト名とナビゲーションを縦方向へ並べ、ヘッダーの余白を24px 20px、サイト名とナビゲーションの間隔を24px、リンク同士の間隔を12px 20pxへ変更するため、スマートフォン・タブレット・PCで利用できます。
コメント