スマホでよく使う固定フッターメニューをスライドに合わせて表示する方法

2025年2月5日

URLをコピーしました！

こんにちはrey( @reydesign8376) です
都内の勤務生活を辞めてWebデザイナーに。今は趣味のサーフィンなどしながら海沿いでのんびり暮らしています。

スマートフォン向けサイトでは、画面下部に固定されたナビゲーションメニュー（フッターメニュー）がよく使用されます。しかし、常に表示されていると画面の視認性を妨げることがあります。

そこで、スクロールの動きに連動して 下にスクロールするとメニューが表示され、上にスクロールするとメニューが隠れる という動作を実装する方法を紹介します！

では行く〜

この機能のメリット

画面の視認性を確保できる → 必要なときだけメニューが表示される
UXが向上する → 画面の邪魔にならず、適切なタイミングでメニューが利用可能
シンプルなコードで実装できる

使う言語

CSSとJavaScript を活用します！

それぞれの役割はこんな感じ

CSS でメニューの初期状態とスライド動作を定義
JavaScript でスクロール方向を検出し、メニューを表示・非表示に切り替え

HTMLの内容

<div class="bottom_menu">
    <ul class="bottom_menu_wrapper">
        <li>
            <a href="#">
                <i class="fa-regular fa-face-smile"></i>
                <br>
                Line
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fa-regular fa-face-smile"></i>
                <br>
                ご予約
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fa-regular fa-face-smile"></i>
                <br>
                お問い合わせ
            </a>
        </li>
    </ul>
</div>

よくあるのはお問い合わせや予約、アカウントログインなどもありますね！
項目は自由に置き換えてください。アイコンもあると分かりやすい！

使ったアイコンはFontAwesome❣️

mellowlife

Webアイコン Font Awesome 使い方| mellowlife こんにちはrey( @reydesign8376) です便利なwebアイコンを提供している「Font Awesome」の使い方をご紹介していきます〜では早速〜 Font Awesomeとは？共有されるコード…

CSSの内容

@media screen and (max-width: 639px) {
    .bottom_menu {
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
        z-index: 1000;
        display: block;
        background-color: var(--color_main);
        font-size: 12px;
        padding: 0.5rem;
        transition: transform 0.3s ease-in-out; /* スムーズなアニメーション */
    }
    .bottom_menu.hide {
        transform: translateY(100%); /* メニューを下に隠す */
    }
}

.bottom_menu に position: fixed を適用し、常に画面下部に配置します。また、transform: translateY(100%) を使用して、メニューを下にスライドさせるようにします。

JavaScriptの内容

スクロール方向を判定し、メニューの表示・非表示を切り替えます。

下にスクロールするとメニューが表示する

document.addEventListener("DOMContentLoaded", function () {
    let lastScrollY = window.scrollY;
    const bottomMenu = document.querySelector(".bottom_menu");

    window.addEventListener("scroll", function () {
        let currentScrollY = window.scrollY;

        if (currentScrollY > lastScrollY) {
            bottomMenu.classList.remove("hide"); // 下スクロール → メニューを表示
        } else {
            bottomMenu.classList.add("hide"); // 上スクロール → メニューを隠す
        }

        lastScrollY = currentScrollY;
    });
});

上にスクロールするとメニューが表示する

今度は逆の動きです。CSSはそのまま使えます。JavaScriptの一部のコードを変えるだけ

if (currentScrollY > lastScrollY) {
      bottomMenu.classList.add("hide"); // 下スクロール → メニュー隠す
    } else {
      bottomMenu.classList.remove("hide"); // 上スクロール → メニュー表示
    }

JavaScriptのポイント

window.scrollY を利用して現在のスクロール位置を取得
スクロールの方向を判定し、classList.add() または classList.remove() で .hide クラスを適用/解除
スクロールするたびに lastScrollY を更新、次回のスクロールと比較