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 スクロール 位置