スクロール位置で自動で開くドロワーメニューを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

ドロワーメニュー
2026.07.17

スクロール位置で自動で開くドロワーメニューを作る方法

HTML・CSS・JavaScriptを使って、ページを下へスクロールして指定した位置へ到達すると、自動で開くドロワーメニューを作る方法を紹介します。このサンプルではページ上端から300pxを超えてスクロールすると、画面左側からドロワーメニューが自動で表示されます。ページをある程度読んだタイミングでナビゲーションを表示したい場合などに利用できます。

ドロワーメニューには「ホーム」「サービス」「お知らせ」「お問い合わせ」のリンクを縦方向に配置します。メニューが表示されるとページ全体に半透明の背景を表示し、「閉じる」ボタンまたはドロワーメニュー外側の背景部分をクリックすると閉じられるようにします。CSSでは基本のドロワーメニューと同じように、閉じた状態では画面左側の外へ完全に隠し、is-activeクラスが追加されると画面内へスライドさせます。

スクロール位置の判定にはJavaScriptのwindow.scrollYを使用します。サンプルでは300を基準にしていますが、この数値を変更することで500pxや1000pxなど任意の位置から自動表示できます。また、一度自動表示したあとは何度も表示されないように状態を記録します。画面幅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-position-drawer_header">

    <h1 class="scroll-position-drawer_title">
      サンプルページ
    </h1>

    <p class="scroll-position-drawer_text">
      ページを下へスクロールすると、指定した位置でドロワーメニューが自動で開きます。
    </p>

  </header>

  <!-- ページ内容 -->
  <main class="scroll-position-drawer_content">

    <section class="scroll-position-drawer_section">

      <h2>コンテンツ1</h2>

      <p>
        ページを下へスクロールして、ドロワーメニューの自動表示を確認してください。
      </p>

    </section>

    <section class="scroll-position-drawer_section">

      <h2>コンテンツ2</h2>

      <p>
        JavaScriptで現在のスクロール位置を確認しています。
      </p>

    </section>

    <section class="scroll-position-drawer_section">

      <h2>コンテンツ3</h2>

      <p>
        指定したスクロール位置を超えるとドロワーメニューが表示されます。
      </p>

    </section>

  </main>

  <!-- ドロワーメニュー表示時の背景 -->
  <div class="scroll-position-drawer_overlay"></div>

  <!-- ドロワーメニュー -->
  <aside class="scroll-position-drawer_drawer">

    <!-- ドロワーメニューのタイトル -->
    <div class="scroll-position-drawer_heading">
      メニュー
    </div>

    <!-- メニューリンク -->
    <nav class="scroll-position-drawer_nav">

      <a class="scroll-position-drawer_link" href="#">
        ホーム
      </a>

      <a class="scroll-position-drawer_link" href="#">
        サービス
      </a>

      <a class="scroll-position-drawer_link" href="#">
        お知らせ
      </a>

      <a class="scroll-position-drawer_link" href="#">
        お問い合わせ
      </a>

    </nav>

    <!-- ドロワーメニューを閉じるボタン -->
    <button class="scroll-position-drawer_close" type="button">
      閉じる
    </button>

  </aside>

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

</body>

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでページ内容とドロワーメニューを配置し、CSSで画面左側から開くドロワーメニューのデザインを設定します。JavaScriptではページ上端からのスクロール量を取得し、指定した位置までスクロールするとドロワーメニューを自動表示します。 

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

各ファイルの役割
index.htmlはページ内容、背景オーバーレイ、ドロワーメニューを配置するファイルです。ドロワーメニューには「ホーム」「サービス」「お知らせ」「お問い合わせ」のリンクと「閉じる」ボタンを配置しています。

style.cssはページ内容とドロワーメニューのデザインを設定するファイルです。ドロワーメニューは初期状態では画面左側の外へ隠し、is-activeクラスが追加されると画面内へスライドして表示します。

script.jsはスクロール位置の判定とドロワーメニューの開閉を行うファイルです。window.scrollYでページ上端からのスクロール量を取得し、設定した位置以上になるとドロワーメニューを自動表示します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。追加のJavaScriptライブラリは必要ありません。

ページを下へスクロールするとJavaScriptが現在のスクロール量を確認します。設定したスクロール位置へ到達すると、背景オーバーレイとドロワーメニューへis-activeクラスが追加され、画面左側からドロワーメニューが自動で開きます。

ドロワーメニューは一度だけ自動表示されます。表示後に「閉じる」ボタンをクリックすると閉じることができ、その後スクロールを続けても自動では再表示されません。

カスタマイズできる内容
index.htmlではドロワーメニューのタイトル、メニューリンクの文字、リンク数、リンク先などを変更できます。実際に使用する場合は各リンクのhref="#"を移動先のURLへ変更してください。

style.cssではドロワーメニューの横幅、背景色、内側余白、メニューリンクのデザイン、背景オーバーレイの濃さ、スライド速度などを変更できます。

script.jsでは、ドロワーメニューを自動表示するスクロール位置を変更できます。

自動表示するスクロール位置の設定
ドロワーメニューを表示する位置は、script.jsの次の部分で設定します。 

const scrollPositionDrawerShowPosition=1000;

1000はページ上端から1000pxスクロールした位置を表しています。この数値を変更するだけで、自動表示する位置を調整できます。

たとえば500pxスクロールした位置で表示する場合は、次のように変更します。 

const scrollPositionDrawerShowPosition=500;

1500pxスクロールした位置で表示する場合は、次のように変更します。 

const scrollPositionDrawerShowPosition=1500;

数値を小さくするとページ上部に近い位置でドロワーメニューが表示され、数値を大きくするとページをより下までスクロールしてから表示されます。ページの長さや表示したいタイミングに合わせて調整してください。

数値調整
script.js
const scrollPositionDrawerShowPosition=1000;
ドロワーメニューを自動表示するスクロール位置です。1000の部分を変更して、ページ上端からの距離をpx単位で設定します。

style.css
width:320px;
ドロワーメニューの横幅です。値を大きくすると横幅が広がり、小さくすると狭くなります。

max-width:85%;
ドロワーメニューの最大横幅です。画面幅が狭い場合でも画面からはみ出しにくくします。

padding:32px 24px;
ドロワーメニューの内側余白です。32pxが上下、24pxが左右の余白です。

background:rgba(15,23,42,.45);
ドロワーメニュー表示時の背景オーバーレイです。最後の.45を大きくすると背景が濃くなり、小さくすると薄くなります。

transform:translateX(calc(-100% - 40px));
閉じた状態のドロワーメニューを画面左側へ完全に隠すための位置です。

transform .3s ease
ドロワーメニューが開閉するときのスライド時間です。.3sを大きくするとゆっくり動き、小さくすると速く動きます。

gap:10px;
メニューリンク同士の間隔です。

padding:14px 16px;
メニューリンクの内側余白です。14pxが上下、16pxが左右の余白です。

レスポンシブ対応
ドロワーメニューにはwidth:320px;とmax-width:85%;を設定しているため、画面幅が狭くなった場合は画面幅に合わせて縮小されます。

画面幅640px以下ではページ上部の余白を40px 16px、ページ内容の左右余白を16px、各コンテンツの内側余白を24px 18pxへ変更しています。ドロワーメニューの内側余白も24px 18pxへ縮小し、スマートフォンでも内容を確認しやすいように調整しています。

この記事の動作・特徴

開く

ボタンや操作をきっかけにコンテンツやUIを開いて表示するサンプルコードです。

その他のコードを探す
スクロール

スクロール操作やスクロール位置に応じて表示や動作を変化させるサンプルコードです。

その他のコードを探す
自動

クリックなどの操作をしなくても、自動で表示・切り替え・実行されるサンプルコードをまとめています。

その他のコードを探す

こちらもおすすめ

ドロワーメニュー
ドロワーメニューのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント