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

下へスクロールすると隠れる固定ヘッダーを作る方法

下へスクロールすると隠れ、上へスクロールすると再び表示される固定ヘッダーを、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-hide-header_header">

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

      <!-- サイト名 -->
      <p class="scroll-hide-header_logo">
        Sample Site
      </p>

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

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

      </nav>

    </div>

  </header>

  <!-- ページ本文 -->
  <main class="scroll-hide-header_content">

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

    <!-- ページの説明文 -->
    <p class="scroll-hide-header_content-text">
      下へスクロールするとヘッダーが隠れ、上へスクロールすると再び表示されます。
    </p>

  </main>

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

</body>
</html>

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

/* 下スクロールで隠れ、上スクロールで表示する固定ヘッダー */
.scroll-hide-header_header{
  position:sticky; /* スクロール中もヘッダーを指定位置へ固定 */
  top:0; /* 上端からの固定位置。0で画面上端へ固定する */
  z-index:10; /* 重なり順。値を大きくすると他の要素より手前に表示されやすくなる */
  width:100%; /* ヘッダーを画面幅いっぱいに表示 */
  padding:28px 40px; /* 上下28px・左右40px。値を大きくするとヘッダー内の余白が広がる */
  background:#ffffff; /* ヘッダーの背景色 */
  border-bottom:1px solid #e5e7eb; /* 下側の枠線。1pxを大きくすると線が太くなる */
  box-shadow:0 4px 18px rgba(15,23,42,.05); /* 4pxは影の縦位置、18pxはぼかし。.05を大きくすると影が濃くなる */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
  transform:translateY(0); /* 通常時はヘッダーを元の位置へ表示する */
  transition:transform .3s ease; /* 0.3秒で表示位置を切り替える。値を大きくするとゆっくり、小さくすると速くなる */
}

/* 下へスクロールしたときのヘッダー */
.scroll-hide-header_header.is-hide{
  transform:translateY(-100%); /* ヘッダー自身の高さ分だけ上へ移動して非表示にする */
}

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

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

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

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

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

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

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

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

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

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

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

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

}

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

// 直前のスクロール位置を保存
let scrollHideHeaderLastPosition = window.scrollY;

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

  // 現在のスクロール位置を取得
  const scrollHideHeaderCurrentPosition = window.scrollY;

  // 下方向へスクロールした場合
  if(scrollHideHeaderCurrentPosition > scrollHideHeaderLastPosition){

    // ヘッダーを上へ移動して非表示にする
    scrollHideHeader.classList.add('is-hide');

  // 上方向へスクロールした場合
  }else if(scrollHideHeaderCurrentPosition < scrollHideHeaderLastPosition){

    // ヘッダーを元の位置へ戻して表示する
    scrollHideHeader.classList.remove('is-hide');

  }

  // ページ最上部では必ずヘッダーを表示する
  if(scrollHideHeaderCurrentPosition <= 0){
    scrollHideHeader.classList.remove('is-hide');
  }

  // 現在位置を次回の比較用として保存
  scrollHideHeaderLastPosition = scrollHideHeaderCurrentPosition;

}

// ページをスクロールするたびに方向を判定
window.addEventListener('scroll', scrollHideHeaderUpdate);

// ページを開いた時点の状態を反映
scrollHideHeaderUpdate();

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではサイト名、ナビゲーション、ページ本文を作成し、CSSでは固定ヘッダーのレイアウトと表示・非表示の動きを設定します。JavaScriptでは現在のスクロール位置と直前のスクロール位置を比較し、下方向へスクロールした場合はヘッダーを隠し、上方向へスクロールした場合はページの途中でもヘッダーを再び表示します。

sample/
    ├── index.html
    ├── style.css
    └── script.js

各ファイルの役割
index.htmlはヘッダーとページ本文を構成するファイルです。「Sample Site」のサイト名、「ホーム」「サービス」「会社概要」「お問い合わせ」のナビゲーション、ページタイトル、説明文を変更できます。各ナビゲーションのhrefを変更すると、実際のページへのリンクを設定できます。

style.cssは固定ヘッダーとページ本文のデザインを設定するファイルです。通常時はtransform:translateY(0);でヘッダーを表示し、.scroll-hide-header_header.is-hideではtransform:translateY(-100%);によってヘッダー自身の高さ分だけ上へ移動して非表示にします。

script.jsはスクロール方向を判定するファイルです。現在のwindow.scrollYと直前に保存したスクロール位置を比較し、下方向の場合はis-hideクラスを追加し、上方向の場合はクラスを削除します。ページ最上部ではスクロール方向にかかわらずヘッダーを表示します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。index.htmlからstyle.cssとscript.jsを読み込む構成になっているため、3つのファイルを配置したあとsample/index.htmlをブラウザで開いてください。下方向へスクロールすると固定ヘッダーが上へ隠れ、ページの途中から上方向へスクロールするとその位置でヘッダーが再び表示されます。

カスタマイズできる内容
index.htmlではサイト名、ナビゲーションの表示文字とリンク先、ページタイトル、説明文を変更できます。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を大きくすると影が濃くなり、小さくすると薄くなります。

transform:translateY(-100%);
ヘッダーを非表示にするときの移動量です。-100%ではヘッダー自身の高さ分だけ上方向へ移動します。

transition:transform .3s ease;
ヘッダーが表示・非表示へ切り替わる時間です。0.3秒で変化し、値を大きくするとゆっくり、小さくすると速く切り替わります。

gap:40px;
サイト名とナビゲーションの間隔です。値を大きくすると両者の間隔が広がり、小さくすると近くなります。

max-width:1200px;
ヘッダー内側の最大横幅です。値を大きくするとサイト名とナビゲーションを配置できる範囲が広がり、小さくすると中央寄りになります。

font-size:20px;
サイト名の文字サイズです。値を大きくするとサイト名が大きくなり、小さくすると控えめになります。

gap:8px 24px;
ナビゲーションリンク同士の間隔です。8pxは上下方向、24pxは左右方向の間隔です。値を大きくするとリンク同士の間隔が広がります。

font-size:14px;
ナビゲーションリンクの文字サイズです。値を大きくすると文字が大きくなり、小さくするとコンパクトになります。

transition:color .3s ease;
ナビゲーションリンクの文字色が切り替わる時間です。0.3秒で変化し、値を大きくするとゆっくり、小さくすると速く切り替わります。

min-height:1100px;
ページ本文の最低高さです。値を大きくするとページが長くなり、スクロールできる距離も長くなります。

padding:80px 24px;
ページ本文の内側余白です。上下の80pxを大きくすると本文内容の上下余白が広がり、左右の24pxを大きくすると画面端との間隔が広がります。

margin:0 0 12px;
ページタイトルの下側余白です。12pxを大きくするとタイトルと説明文の間隔が広がり、小さくすると近くなります。

font-size:28px;
ページタイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると控えめになります。

line-height:1.8;
ページ説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%;によってヘッダーを画面幅いっぱいに表示し、max-width:1200px;によって内側の内容が必要以上に広がらないようにしています。画面幅が768px以下になると、サイト名とナビゲーションを縦方向へ並べ、ヘッダーの余白を24px 20px、サイト名とナビゲーションの間隔を24px、リンク同士の間隔を12px 20pxへ変更するため、スマートフォン・タブレット・PCで利用できます。