2021-04-10

position: fixed;を指定したハンバーガーメニューをスマホの時にスクロールさせる方法

今回は、「position: fixed;を指定したハンバーガーメニューをスマホの時にスクロールさせる方法」について紹介します。

例えば、ハンバーガーメニューが以下のように「position: fixed;」で固定されていたとします。

<nav id="gloval-nav">
    <ul>
        <li>メニュー</li>
        <!-- 以下省略 -->
    </ul>
</nav>

#gloval-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

このままだと縦にスクロールさせることが出来ません。

スクロールさせるには、以下のコードを追加しましょう。

#gloval-nav ul {
  height: 100%;
  overflow: auto;
}

スクロールさせたい箇所に対してoverflowを指定すると、「position: fixed;」を使ったとしてもスクロールさせることが出来ますよ！

今回紹介した実装は実務でもよく使うので、是非マスターしましょう！

DOWNLOAD

ブログ用WordPressテーマを無料配布中

実務で使える構成・設計をベースにしたテーマです。
すぐにブログ運用を始めたい方はこちらからダウンロードできます。

Webサイトの集客や導線設計でお悩みではありませんか？

当社では、データ分析（GA4・検索データ）をもとに、
成果につながるWeb制作・改善をご提案しています。

課題の整理からでも大丈夫ですので、まずはお気軽にご相談ください。

Author：

Yujiro

Profile：

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

Webis Tech LABO.