Position Fixedでスクロールするにはどうすればいいですか？

position:fixed要素内でスクロールする方法

Webサイト制作において、ナビゲーションバーなどの要素を画面の上部に固定表示したい場合、「position: fixed;」を使用することが一般的です。しかし、固定した要素内でコンテンツをスクロールさせたい場合、いくつかの注意点があります。

この記事では、「position: fixed;」を適用した要素内でスクロールを実現する方法について、具体的なコード例を交えながら解説します。

position:fixed要素内でスクロールできないケース

まずは、なぜposition: fixed;を適用した要素内でスクロールできないケースが発生するのかを理解しましょう。position: fixed;は、要素をビューポートに対して固定するプロパティです。そのため、要素は通常のドキュメントフローから外れ、親要素の影響を受けなくなります。結果として、固定した要素の高さはコンテンツ量に関わらず固定され、コンテンツが要素の高さからはみ出てしまうとスクロールできなくなります。

解決策：親要素の高さとoverflowプロパティを設定する

position: fixed;を適用した要素内でスクロールを実現するには、以下の2つの設定を行う必要があります。

固定する要素の親要素の高さ(height)を100%に設定する。
固定する要素の親要素にoverflow-y: scroll;を設定する。

1. 親要素の高さを100%に設定する

固定する要素の親要素の高さを100%に設定することで、親要素の高さがビューポート全体に広がります。これにより、固定した要素もビューポート全体を覆うことができ、スクロール可能な領域が確保されます。

2. overflow-y: scroll;を設定する

overflow-y: scroll;を設定することで、親要素のコンテンツが要素の高さからはみ出した場合に、垂直方向のスクロールバーが表示されるようになります。

コード例

具体的なコード例は以下の通りです。ここでは、ナビゲーションバーを画面上部に固定し、ナビゲーションメニューをスクロールできるようにしています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>position:fixed要素内でスクロール</title>
  <style>
    body, html {
      margin: 0;
      height: 100%;
    }
    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #f0f0f0;
    }
    .header-inner {
      height: 100vh;
      overflow-y: scroll;
    }
    .nav {
      padding: 20px;
    }
    .nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .nav li {
      margin-bottom: 10px;
    }
    .content {
      padding: 20px;
      margin-top: 100vh; /* headerの高さ分下にずらす */
    }
  </style>
</head>
<body>
  <header class="header">
    <div class="header-inner">
      <nav class="nav">
        <ul>
          <li><a href="#">メニュー1</a></li>
          <li><a href="#">メニュー2</a></li>
          <li><a href="#">メニュー3</a></li>
          <li><a href="#">メニュー4</a></li>
          <li><a href="#">メニュー5></a></li>
          <li><a href="#">メニュー6</a></li>
          <li><a href="#">メニュー7</a></li>
          <li><a href="#">メニュー8</a></li>
          <li><a href="#">メニュー9</a></li>
          <li><a href="#">メニュー10</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <main class="content">
    <p>コンテンツ</p>
  </main>
</body>
</html>

ポイント

html要素とbody要素にもheight: 100%;を設定することで、ビューポート全体の高さを取得できるようにしています。
.contentにmargin-top: 100vh;を設定することで、ヘッダーの高さ分コンテンツを下にずらしています。これにより、コンテンツがヘッダーに隠れてしまうことを防ぎます。
vhはビューポートの高さを基準とした単位で、1vhはビューポートの高さの1%を意味します。

まとめ

position: fixed;を適用した要素内でスクロールを実現するには、親要素の高さの設定とoverflow-y: scroll;の指定が重要となります。上記を参考に、固定した要素内でコンテンツをスクロールさせる方法を実装してみてください。

よくある質問

質問	回答
position:fixed 以外の方法でヘッダーを固定表示できますか？	はい、position:sticky を使用する方法があります。position:sticky は、スクロール位置に応じて要素を固定したり、通常のフローに戻したりすることができます。
overflow-y: scroll; を設定すると、スクロールバーが常時表示されてしまいます。スクロールが必要な場合のみ表示するにはどうすればよいですか？	overflow-y: auto; を設定することで、スクロールが必要な場合のみスクロールバーが表示されるようになります。
position:fixed を使用すると、要素が他の要素と重なってしまいます。どのように調整すればよいですか？	z-index プロパティを使用して、要素の重なり順序を調整することができます。z-index の値が大きい要素ほど、上に表示されます。

参考資料

その他の参考記事:jquery スクロール位置