スクロール操作に合わせて、固定フッターメニューを自動で表示・非表示に切り替える方法【HTML/CSS/JavaScript・サンプルコード付き】

スクロール操作に合わせて、固定フッターメニューを自動で表示・非表示に切り替える方法

スクロール操作に合わせて、固定フッターメニューを自動で表示・非表示に切り替える方法を紹介します。本記事では、HTML、CSS、JavaScriptを使って、ページを下へスクロールするとフッターメニューを自動で非表示にし、上へスクロールすると再び表示するレイアウトを作成します。画面を広く使えるため、コンテンツを閲覧しているときの邪魔になりにくく、スマホ向けサイトやアプリ風デザインでよく利用されるUIです。

このサンプルコードでは、スクロール方向をJavaScriptで判定し、フッターメニューへクラスを付け替えることで表示・非表示を切り替えます。CSSのアニメーションを利用して滑らかに表示位置を変更するため、自然な動きでフッターメニューを表示できます。HTML・CSS・JavaScriptを分けたシンプルな構成なので、既存サイトへ組み込みやすく、デザインのカスタマイズもしやすい内容です。

このような固定フッターメニューは、ブログ、ECサイト、会員サイト、管理画面など、スマートフォンでの操作性を向上させたい場面で活用できます。必要なときだけメニューを表示することで画面を有効活用できるため、ユーザーの閲覧体験を向上させたい場合にも役立ちます。

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

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

デモ

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

<!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>

  <!-- ページ全体 -->
  <div class="scroll-toggle-footer-menu_wrap">

    <!-- タイトル -->
    <h1 class="scroll-toggle-footer-menu_title">
      スクロールで表示・非表示が切り替わる固定フッターメニュー
    </h1>

    <!-- コンテンツ -->
    <main class="scroll-toggle-footer-menu_content">

      <p>スクロール方向に応じて、固定フッターメニューを表示・非表示に切り替えるサンプルです。</p>

    </main>

  </div>

  <!-- フッターメニュー -->
  <nav class="scroll-toggle-footer-menu_nav">

    <a href="#" class="scroll-toggle-footer-menu_item">

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

      <span>ホーム</span>

    </a>

    <a href="#" class="scroll-toggle-footer-menu_item">

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

      <span>検索</span>

    </a>

    <a href="#" class="scroll-toggle-footer-menu_item">

      <!-- お気に入りアイコン -->
      <svg viewBox="0 0 24 24" fill="none">
        <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"/>
      </svg>

      <span>お気に入り</span>

    </a>

    <a href="#" class="scroll-toggle-footer-menu_item">

      <!-- 通知アイコン -->
      <svg viewBox="0 0 24 24" fill="none">
        <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 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"/>
      </svg>

      <span>通知</span>

    </a>

    <a href="#" class="scroll-toggle-footer-menu_item">

      <!-- マイページアイコン -->
      <svg viewBox="0 0 24 24" fill="none">
        <circle cx="12" cy="8" r="3" stroke="currentColor" stroke-width="2"/>
        <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"/>
      </svg>

      <span>マイページ</span>

    </a>

  </nav>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0;
  font-family:sans-serif;
  background:#f8fafc;
}

/* 幅計算を統一 */
*{
  box-sizing:border-box;
}

/* コンテンツ */
.scroll-toggle-footer-menu_wrap{
  max-width:900px;
  margin:0 auto;
  padding:40px 20px 100px;
}

/* タイトル */
.scroll-toggle-footer-menu_title{
  margin-bottom:24px;
  text-align:center;
}

/* ダミーコンテンツ */
.scroll-toggle-footer-menu_content{
  min-height:1500px;
}

/* フッターメニュー */
.scroll-toggle-footer-menu_nav{
  position:fixed;
  left:0;
  bottom:0;
  width:100%;
  display:flex;
  justify-content:space-around;
  padding:10px 0;
  border-top:1px solid #d1d5db;
  background:#ffffff;
  transition:transform .3s ease;
}

/* 非表示 */
.scroll-toggle-footer-menu_nav.is-hidden{
  transform:translateY(100%);
}

/* メニュー */
.scroll-toggle-footer-menu_item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:#2563eb;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
}

/* アイコン */
.scroll-toggle-footer-menu_item svg{
  width:24px;
  height:24px;
}

// フッターメニューを取得
const scrollToggleFooterMenu = document.querySelector('.scroll-toggle-footer-menu_nav');

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

// スクロール時の処理
window.addEventListener('scroll', function(){

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

  // 下へスクロールした場合は非表示
  if(currentTop > scrollToggleFooterLastTop){
    scrollToggleFooterMenu.classList.add('is-hidden');
  }else{
    // 上へスクロールした場合は表示
    scrollToggleFooterMenu.classList.remove('is-hidden');
  }

  // 次回比較用に現在の位置を保存
  scrollToggleFooterLastTop = currentTop;

});

/*
----------------------------------------
表示・非表示を逆にする場合
----------------------------------------

下へスクロールした場合は表示
if(currentTop > scrollToggleFooterLastTop){
  scrollToggleFooterMenu.classList.remove('is-hidden');
}else{
  // 上へスクロールした場合は非表示
  scrollToggleFooterMenu.classList.add('is-hidden');
}

*/

ファイル構成と設置方法

このサンプルでは、HTML・CSS・JavaScriptを別ファイルで管理します。HTMLに固定フッターメニューを配置し、CSSで画面下部へ固定表示するレイアウトを作成します。JavaScriptではスクロール方向を判定し、下へスクロールしたときはフッターメニューを非表示、上へスクロールしたときは再び表示する処理を行います。

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

3つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。スクロール方向に応じてフッターメニューの表示・非表示が自動で切り替わります。表示・非表示の動作を逆にしたい場合は、script.js 内のコメントに記載しているサンプルコードへ変更してください。