スクロールすると浮き上がる固定ヘッダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

<!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="floating-header_header">

    <!-- ヘッダーの内側 -->
    <div class="floating-header_inner">

      <!-- サイト名。自由に書き換えられます -->
      <p class="floating-header_logo">
        Sample Site
      </p>

      <!-- メインナビゲーション -->
      <nav class="floating-header_nav" aria-label="メインナビゲーション">

        <!-- hrefと表示文字はサイトに合わせて変更してください -->
        <a href="#">ホーム</a>
        <a href="#">サービス</a>
        <a href="#">会社概要</a>
        <a href="#">お問い合わせ</a>

      </nav>

    </div>

  </header>

  <!-- ページ本文。ここは実際の記事内容などへ自由に書き換えられます -->
  <main class="floating-header_content">

    <!-- ページタイトル -->
    <div class="floating-header_content-title">
      ページタイトル
    </div>

    <!-- ページの説明文 -->
    <p class="floating-header_content-text">
      ページをスクロールすると、固定ヘッダーに影が付き浮き上がって表示されます。
    </p>

  </main>

  <!-- スクロール位置を判定するJavaScript -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  background:#f3f4f6; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* ページ上部に固定するヘッダー */
.floating-header_header{
  position:sticky; /* スクロール時にヘッダーを指定位置へ固定 */
  top:0; /* 上端からの固定位置。値を大きくすると画面上端から離れる */
  z-index:10; /* 重なり順。値を大きくすると他の要素より手前に表示されやすくなる */
  width:100%; /* ヘッダーを画面幅いっぱいに表示 */
  padding:28px 40px; /* 上下28px・左右40px。値を大きくするとヘッダー内の余白が広がる */
  background:#ffffff; /* ヘッダーの背景色 */
  border-bottom:1px solid #e5e7eb; /* スクロール前に表示する下側の枠線。1pxを大きくすると線が太くなる */
  box-shadow:none; /* スクロール前は影を表示しない */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
  transition:
    box-shadow .3s ease,
    border-color .3s ease;
  /*
    0.3秒で影と枠線の色を切り替える。
    値を大きくすると変化がゆっくりになり、小さくすると速くなる。
  */
}

/* スクロールしたときのヘッダー */
.floating-header_header.is-scrolled{
  border-bottom-color:transparent; /* 影を表示している間は下側の枠線を透明にする */
  box-shadow:0 10px 30px rgba(15,23,42,.22); /* 10pxは影の縦位置、30pxはぼかし。値を大きくすると影が広がり浮き上がりが強く見える */
}

/* ヘッダーの内側 */
.floating-header_inner{
  display:flex; /* サイト名とナビゲーションを横並びにする */
  align-items:center; /* 縦方向の中央へ揃える */
  justify-content:space-between; /* サイト名を左、ナビゲーションを右へ配置 */
  gap:40px; /* サイト名とナビゲーションの間隔。値を大きくすると間隔が広がる */
  max-width:1200px; /* 内容の最大横幅。値を大きくすると配置できる範囲が広がる */
  margin:0 auto; /* 左右中央へ配置 */
}

/* サイト名 */
.floating-header_logo{
  margin:0; /* p要素の標準余白を削除 */
  color:#111827; /* サイト名の文字色 */
  font-size:20px; /* サイト名の文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* サイト名の文字の太さ。値を大きくすると太くなる */
  white-space:nowrap; /* サイト名を途中で改行しない */
}

/* ナビゲーション */
.floating-header_nav{
  display:flex; /* ナビゲーションリンクを横並びにする */
  flex-wrap:wrap; /* 横幅が不足した場合はリンクを折り返す */
  justify-content:flex-end; /* ナビゲーションを右側へ揃える */
  gap:8px 24px; /* 上下8px・左右24px。値を大きくするとリンク同士の間隔が広がる */
}

/* 通常時・訪問済みのナビゲーションリンク */
.floating-header_nav a:link,
.floating-header_nav a:visited{
  color:#374151; /* ナビゲーションリンクの文字色 */
  background:transparent; /* リンクの背景を透明にする */
  font-size:14px; /* リンクの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:600; /* リンクの文字の太さ。値を大きくすると太くなる */
  text-decoration:none; /* リンクの下線を非表示にする */
  transition:color .3s ease; /* 0.3秒で文字色を切り替える。値を大きくすると変化がゆっくりになる */
}

/* マウス操作・フォーカス時のナビゲーションリンク */
.floating-header_nav a:hover,
.floating-header_nav a:focus,
.floating-header_nav a:active{
  color:#2563eb; /* 操作時の文字色 */
  background:transparent; /* 操作時も背景を透明にする */
  text-decoration:none; /* 操作時も下線を表示しない */
}

/* ページ本文 */
.floating-header_content{
  min-height:900px; /* 本文の最低高さ。値を大きくするとスクロールできる距離が長くなる */
  padding:80px 24px; /* 上下80px・左右24px。値を大きくすると本文の余白が広がる */
  box-sizing:border-box; /* paddingを横幅へ含める */
}

/* ページタイトル */
.floating-header_content-title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  color:#111827; /* ページタイトルの文字色 */
  font-size:28px; /* ページタイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* ページタイトルの文字の太さ。値を大きくすると太くなる */
  text-align:center; /* ページタイトルを中央揃えにする */
}

/* ページ説明文 */
.floating-header_content-text{
  margin:0; /* p要素の標準余白を削除 */
  color:#64748b; /* 説明文の文字色 */
  line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
  text-align:center; /* 説明文を中央揃えにする */
}

/* 画面幅768px以下 */
@media (max-width:768px){

  /* ヘッダー */
  .floating-header_header{
    padding:24px 20px; /* 上下24px・左右20px。狭い画面ではヘッダーの余白を小さくする */
  }

  /* ヘッダーの内側 */
  .floating-header_inner{
    flex-direction:column; /* サイト名とナビゲーションを縦方向へ並べる */
    align-items:flex-start; /* 内容を左側へ揃える */
    gap:24px; /* サイト名とナビゲーションの間隔。値を大きくすると間隔が広がる */
  }

  /* ナビゲーション */
  .floating-header_nav{
    justify-content:flex-start; /* ナビゲーションを左側へ揃える */
    gap:12px 20px; /* 上下12px・左右20px。値を大きくするとリンク同士の間隔が広がる */
  }

}

// 固定ヘッダーを取得
const floatingHeader = document.querySelector('.floating-header_header');

// スクロール位置に合わせてヘッダーの表示を更新する関数
function floatingHeaderUpdate(){

  // ページを1px以上スクロールしているか判定
  if(window.scrollY > 0){

    // スクロール中は影を表示するクラスを追加
    floatingHeader.classList.add('is-scrolled');

  }else{

    // ページ最上部では影を表示するクラスを削除
    floatingHeader.classList.remove('is-scrolled');

  }

}

// ページをスクロールするたびに状態を更新
window.addEventListener('scroll', floatingHeaderUpdate);

// ページを開いた時点のスクロール位置でも状態を更新
floatingHeaderUpdate();