下スクロールで隠れて上スクロールで表示する固定フッターメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】

メニュー項目・サイズ・色・余白・アイコンなどを設定して、HTML・CSS・JavaScriptを自動生成できます。

下スクロールで隠れて上スクロールで表示する固定フッターメニューの作り方

下スクロールで隠れて上スクロールで表示する固定フッターメニューの作り方を紹介します。このサンプルでは、画面下部に固定した5つのメニューを、ページのスクロール方向に合わせて自動で表示・非表示に切り替えます。ページを下へスクロールすると固定フッターメニューが画面下へ移動して隠れ、上へスクロールすると再び表示される仕組みです。

JavaScriptで現在のスクロール位置と直前のスクロール位置を比較し、下方向へ移動している場合は固定フッターメニューへ非表示用のクラスを追加します。上方向へ移動した場合はクラスを削除するため、利用者のスクロール操作だけで表示状態を切り替えられます。長いページを読み進めているときはメニューを隠して表示領域を広く使い、ページを戻る操作をしたときにはナビゲーションをすぐに表示できます。

会員サイト、ECサイト、スマートフォン向けWebサイトなど、画面下部へ固定ナビゲーションを配置しながら本文の閲覧領域も確保したい場合に利用できます。HTMLではメニュー名・リンク先・SVGアイコンを変更でき、CSSではメニューの高さ、文字サイズ、アイコンサイズ、色、表示・非表示が切り替わる速度を調整できます。画面幅640px以下ではメニューの高さや文字、アイコンを小さくするレスポンシブ対応も行っています。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードをUTF-8に設定 -->
  <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-toggle-footer-menu_header">

    <!-- ページタイトル -->
    <div class="scroll-toggle-footer-menu_title">
      スクロール連動メニュー
    </div>

    <!-- 固定フッターメニューの動作説明 -->
    <p class="scroll-toggle-footer-menu_description">
      下へスクロールすると隠れ、上へスクロールすると表示されます。
    </p>

  </header>

  <!-- スクロール動作を確認するためのメインコンテンツ -->
  <main class="scroll-toggle-footer-menu_main">

    <!-- 下方向へスクロールしたときの動作説明 -->
    <div class="scroll-toggle-footer-menu_card">
      <div class="scroll-toggle-footer-menu_heading">下へスクロール</div>
      <p>本文を下へ読み進めると、フッターメニューが自動で隠れます。</p>
    </div>

    <!-- 固定フッターメニューが非表示になる動作説明 -->
    <div class="scroll-toggle-footer-menu_card">
      <div class="scroll-toggle-footer-menu_heading">メニュー非表示</div>
      <p>下方向へのスクロール中は、画面下部のメニューを非表示にします。</p>
    </div>

    <!-- JavaScriptによる表示状態の切り替え説明 -->
    <div class="scroll-toggle-footer-menu_card">
      <div class="scroll-toggle-footer-menu_heading">表示切り替え</div>
      <p>スクロール方向をJavaScriptで判定し、CSSクラスを切り替えます。</p>
    </div>

    <!-- 上方向へスクロールしたときの動作説明 -->
    <div class="scroll-toggle-footer-menu_card">
      <div class="scroll-toggle-footer-menu_heading">上へスクロール</div>
      <p>少し上へ戻ると、フッターメニューが再び表示されます。</p>
    </div>

    <!-- スクロール量を確保するための確認用コンテンツ -->
    <div class="scroll-toggle-footer-menu_card">
      <div class="scroll-toggle-footer-menu_heading">確認用コンテンツ</div>
      <p>ページを上下にスクロールして、表示と非表示の連動を確認できます。</p>
    </div>

    <!-- 長いページでの動作を確認するためのコンテンツ -->
    <div class="scroll-toggle-footer-menu_card">
      <div class="scroll-toggle-footer-menu_heading">長いページ</div>
      <p>長めのページでも、スクロール方向に合わせてメニューを切り替えられます。</p>
    </div>

    <!-- ページ下部までスクロールするための最後のコンテンツ -->
    <div class="scroll-toggle-footer-menu_card">
      <div class="scroll-toggle-footer-menu_heading">最後のカード</div>
      <p>上方向へスクロールすると、隠れていたメニューが再び表示されます。</p>
    </div>

  </main>

  <!-- 画面下部へ固定して表示するフッターメニュー -->
  <nav class="scroll-toggle-footer-menu_nav">

    <!-- ホームメニュー -->
    <a href="#" class="scroll-toggle-footer-menu_item">

      <!-- ホームアイコン -->
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M3 10L12 3L21 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        <path d="M6 10V20H18V10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>

      <!-- ホームのメニュー名 -->
      <span>ホーム</span>

    </a>

    <!-- 検索メニュー -->
    <a href="#" class="scroll-toggle-footer-menu_item">

      <!-- 検索アイコン -->
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <circle cx="11" cy="11" r="6" stroke="currentColor" stroke-width="2"></circle>
        <path d="M16 16L21 21" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
      </svg>

      <!-- 検索のメニュー名 -->
      <span>検索</span>

    </a>

    <!-- お気に入りメニュー -->
    <a href="#" class="scroll-toggle-footer-menu_item">

      <!-- お気に入りアイコン -->
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M12 20L5 13C3.5 11.5 3.5 9 5 7.5C6.5 6 9 6 10.5 7.5L12 9L13.5 7.5C15 6 17.5 6 19 7.5C20.5 9 20.5 11.5 19 13L12 20Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>
      </svg>

      <!-- お気に入りのメニュー名 -->
      <span>お気に入り</span>

    </a>

    <!-- 通知メニュー -->
    <a href="#" class="scroll-toggle-footer-menu_item">

      <!-- 通知アイコン -->
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M7 17H17L16 15V10C16 7.8 14.2 6 12 6C9.8 6 8 7.8 8 10V15L7 17Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>
        <path d="M10.5 19C10.8 19.6 11.3 20 12 20C12.7 20 13.2 19.6 13.5 19" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
      </svg>

      <!-- 通知のメニュー名 -->
      <span>通知</span>

    </a>

    <!-- マイページメニュー -->
    <a href="#" class="scroll-toggle-footer-menu_item">

      <!-- マイページアイコン -->
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <circle cx="12" cy="8" r="3" stroke="currentColor" stroke-width="2"></circle>
        <path d="M6 20C6 16.7 8.7 14 12 14C15.3 14 18 16.7 18 20" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
      </svg>

      <!-- マイページのメニュー名 -->
      <span>マイページ</span>

    </a>

  </nav>

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

</body>
</html>

/* すべての要素でpaddingとborderを要素の幅と高さに含める */
*{
  box-sizing:border-box;
}

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding-bottom:76px; /* 高さ76pxの固定フッターメニューと本文が重ならないように下部へ余白を確保 */
  background:#f8fafc; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体のフォント */
}

/* ページ上部 */
.scroll-toggle-footer-menu_header{
  padding:20px; /* ヘッダー内側の余白。値を大きくするとタイトル周辺の余白が広がる */
  border-bottom:1px solid #e5e7eb; /* ヘッダー下部に1pxの境界線を表示 */
  background:#ffffff; /* ヘッダーの背景色 */
  text-align:center; /* タイトルと説明文を中央揃え */
}

/* ページタイトル */
.scroll-toggle-footer-menu_title{
  margin:0; /* タイトル周囲の余白を削除 */
  color:#111827; /* タイトルの文字色 */
  font-size:28px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字で表示 */
  line-height:1.4; /* タイトルの行間。値を大きくすると行間が広がる */
}

/* ページ説明文 */
.scroll-toggle-footer-menu_description{
  margin:8px 0 0; /* タイトルとの間に8pxの余白を設定 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:13px; /* 説明文の文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.7; /* 説明文の行間。値を大きくすると行間が広がる */
}

/* メインコンテンツ */
.scroll-toggle-footer-menu_main{
  min-height:1200px; /* スクロール動作を確認できるように最低1200pxの高さを確保 */
  padding:28px 24px 100px; /* 上28px・左右24px・下100pxの内側余白 */
}

/* 各説明ブロック */
.scroll-toggle-footer-menu_card{
  margin:0 0 28px; /* 各説明ブロックの下側に28pxの間隔を設定 */
}

/* 最後の説明ブロック */
.scroll-toggle-footer-menu_card:last-child{
  margin-bottom:0; /* 最後の説明ブロックだけ下側の余白を削除 */
}

/* 説明ブロックの見出し */
.scroll-toggle-footer-menu_heading{
  margin:0 0 8px; /* 見出しと本文の間に8pxの余白を設定 */
  color:#111827; /* 見出しの文字色 */
  font-size:20px; /* 見出しの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* 見出しを太字で表示 */
  line-height:1.4; /* 見出しの行間。値を大きくすると行間が広がる */
}

/* 説明ブロックの本文 */
.scroll-toggle-footer-menu_card p{
  margin:0; /* 本文周囲の余白を削除 */
  color:#4b5563; /* 本文の文字色 */
  font-size:14px; /* 本文の文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.8; /* 本文の行間。値を大きくすると行間が広がる */
}

/* 画面下部に固定するフッターメニュー */
.scroll-toggle-footer-menu_nav{
  position:fixed; /* スクロールしても画面内の同じ位置へ固定 */
  right:0; /* メニューの右端を画面右端へ合わせる */
  bottom:0; /* メニューの下端を画面下端へ合わせる */
  left:0; /* メニューの左端を画面左端へ合わせる */
  z-index:1000; /* 通常のページコンテンツより手前に表示 */
  display:flex; /* 5つのメニューを横方向に並べる */
  width:100%; /* 固定フッターメニューを画面幅いっぱいに表示 */
  height:76px; /* 固定フッターメニューの高さ。値を大きくするとメニューが高くなる */
  border-top:1px solid #d1d5db; /* メニュー上部に1pxの境界線を表示 */
  background:#ffffff; /* 固定フッターメニューの背景色 */
  transform:translateY(0); /* 通常時は元の位置に表示 */
  transition:transform .3s ease; /* 表示位置を0.3秒かけて滑らかに切り替える */
}

/* 非表示状態の固定フッターメニュー */
.scroll-toggle-footer-menu_nav.is-hidden{
  transform:translateY(100%); /* メニュー自身の高さ100%分だけ下方向へ移動して画面外へ隠す */
}

/* 各メニュー */
.scroll-toggle-footer-menu_item{
  display:flex; /* アイコンとメニュー名の配置にFlexboxを使用 */
  flex:1; /* 5つのメニューへ同じ横幅を割り当てる */
  flex-direction:column; /* アイコンとメニュー名を縦方向に並べる */
  align-items:center; /* アイコンとメニュー名を横方向の中央へ配置 */
  justify-content:center; /* アイコンとメニュー名を縦方向の中央へ配置 */
  gap:6px; /* アイコンとメニュー名の間に6pxの間隔を設定 */
  color:#2563eb; /* アイコンとメニュー名の色 */
  font-size:12px; /* メニュー名の文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* メニュー名を太字で表示 */
  line-height:1.2; /* メニュー名の行間 */
  text-decoration:none; /* リンクの下線を非表示 */
}

/* 各メニューのSVGアイコン */
.scroll-toggle-footer-menu_item svg{
  width:24px; /* SVGアイコンの横幅。値を大きくするとアイコンが大きくなる */
  height:24px; /* SVGアイコンの高さ。値を大きくするとアイコンが大きくなる */
}

/* 画面幅640px以下の表示 */
@media (max-width:640px){

  /* スマートフォン表示時のページタイトル */
  .scroll-toggle-footer-menu_title{
    font-size:24px; /* タイトルの文字サイズを24pxへ変更 */
  }

  /* スマートフォン表示時のメインコンテンツ */
  .scroll-toggle-footer-menu_main{
    padding:24px 18px 92px; /* 上24px・左右18px・下92pxの内側余白へ変更 */
  }

  /* スマートフォン表示時の固定フッターメニュー */
  .scroll-toggle-footer-menu_nav{
    height:68px; /* 固定フッターメニューの高さを68pxへ変更 */
  }

  /* スマートフォン表示時の各メニュー */
  .scroll-toggle-footer-menu_item{
    font-size:11px; /* メニュー名の文字サイズを11pxへ変更 */
  }

  /* スマートフォン表示時のSVGアイコン */
  .scroll-toggle-footer-menu_item svg{
    width:22px; /* SVGアイコンの横幅を22pxへ変更 */
    height:22px; /* SVGアイコンの高さを22pxへ変更 */
  }

}

// 画面下部へ固定しているフッターメニューを取得
const scrollToggleFooterMenu = document.querySelector('.scroll-toggle-footer-menu_nav');

// ページを開いた時点のスクロール位置を直前位置として保存
let scrollToggleFooterLastTop = window.scrollY;

// ページが上下へスクロールされるたびに処理を実行
window.addEventListener('scroll',function(){

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

  // 現在位置が直前位置より大きい場合は下方向へのスクロールと判定
  if(currentTop > scrollToggleFooterLastTop){

    // is-hiddenクラスを追加して固定フッターメニューを画面下へ移動
    scrollToggleFooterMenu.classList.add('is-hidden');

  }else{

    // 上方向へのスクロールではis-hiddenクラスを削除してメニューを再表示
    scrollToggleFooterMenu.classList.remove('is-hidden');

  }

  // 今回のスクロール位置を次回の方向判定で使用する直前位置として保存
  scrollToggleFooterLastTop = currentTop;

});

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

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

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではホーム、検索、お気に入り、通知、マイページの5つの固定フッターメニューを配置し、CSSでは画面下部への固定表示と表示・非表示の移動を設定します。JavaScriptではページの現在のスクロール位置と直前のスクロール位置を比較し、下方向ではメニューを隠し、上方向では再表示します。

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

各ファイルの役割
index.htmlはページ上部、スクロール確認用の本文、固定フッターメニューを構成するファイルです。「ホーム」「検索」「お気に入り」「通知」「マイページ」のメニュー名、リンク先、SVGアイコン、表示順を変更できます。

style.cssはページ全体と固定フッターメニューのデザインを設定するファイルです。position:fixedでメニューを画面下部へ固定し、width:100%で画面幅いっぱいに表示します。is-hiddenクラスが付くとtransform:translateY(100%)によってメニュー全体が画面下へ移動します。

script.jsはスクロール方向を判定するファイルです。window.scrollYから現在のスクロール位置を取得し、直前の位置より大きい場合は下スクロール、小さい場合は上スクロールとして判定します。下方向ではis-hiddenクラスを追加し、上方向では削除します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。index.htmlからstyle.cssとscript.jsを読み込む構成になっているため、3ファイルを配置したあとsample/index.htmlをブラウザで開いてください。

ページを開いた直後は固定フッターメニューが画面下部へ表示されています。ページを下方向へスクロールするとメニューが下へ移動して隠れ、上方向へスクロールすると再び表示されます。index.htmlの各メニューに設定しているhref="#"は、実際に使用するページのURLへ変更してください。

カスタマイズできる内容
index.htmlでは、固定フッターメニューのメニュー名、リンク先、SVGアイコン、表示順を変更できます。用途に合わせてホーム、検索、お気に入り、通知、マイページ以外の項目へ変更することもできます。

style.cssでは、固定フッターメニューの背景色、境界線、文字色、高さ、文字サイズ、アイコンサイズ、アイコンと文字の間隔を変更できます。また、transitionの時間を変更すると、メニューが隠れるときと表示されるときの移動速度を調整できます。

数値調整
style.css
padding-bottom:76px;
固定フッターメニューと本文が重ならないようにページ下部へ確保する余白です。固定フッターメニューの高さを変更する場合は、この値も合わせて調整します。

padding:20px;
ページ上部の内側余白です。値を大きくするとタイトル周辺の余白が広がり、小さくすると狭くなります。

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

margin:8px 0 0;
タイトルと説明文の間隔です。8pxを大きくすると間隔が広がり、小さくすると狭くなります。

font-size:13px;
ページ上部にある説明文の文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。

min-height:1200px;
メインコンテンツの最低高さです。値を大きくするとページが長くなり、小さくすると短くなります。

padding:28px 24px 100px;
メインコンテンツの内側余白です。上28px、左右24px、下100pxを指定しています。それぞれの値を変更すると対応する方向の余白が変化します。

margin:0 0 28px;
各説明ブロックの下側の間隔です。28pxを大きくするとブロック同士の間隔が広がり、小さくすると狭くなります。

font-size:20px;
説明ブロックの見出し文字サイズです。値を大きくすると見出しが大きくなり、小さくすると小さくなります。

font-size:14px;
説明ブロック本文の文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。

height:76px;
固定フッターメニューの高さです。値を大きくするとメニューが高くなり、小さくすると低くなります。変更する場合はbodyのpadding-bottom:76px;も合わせて調整します。

transition:transform .3s ease;
固定フッターメニューが表示・非表示へ切り替わる時間です。.3sは0.3秒です。値を大きくするとゆっくり移動し、小さくすると速く移動します。

transform:translateY(100%);
非表示時に固定フッターメニューを自身の高さ100%分だけ下方向へ移動します。

gap:6px;
SVGアイコンとメニュー名の間隔です。値を大きくすると間隔が広がり、小さくすると近くなります。

font-size:12px;
メニュー名の文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。

width:24px;・height:24px;
SVGアイコンの横幅と高さです。値を大きくするとアイコンが大きくなり、小さくすると小さくなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssの固定フッターメニューへwidth:100%を指定しているため、画面幅に合わせて横幅いっぱいに表示されます。また、各メニューへflex:1を指定しているため、5つの項目が利用できる横幅へ均等に配置されます。

画面幅640px以下では、ページタイトルを24px、本文の余白を24px 18px 92px、固定フッターメニューの高さを68px、メニュー文字を11px、SVGアイコンを22pxへ変更します。スマートフォン・タブレット・PCの画面幅に合わせて利用できます。