はじめに
本記事では、Bootstrap 5を使って、ナビゲーションバーを固定して、コンテンツをスクロールできるようにする方法について解説します。
stickyを使うか、fixedを使うかの2パターンを紹介します。
stickyでナビゲーションバーを固定スクロールにする方法
ソースコードを実装していきます。
<!-- sticky-topで固定 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="#">ホーム</a></li>
<li class="nav-item"><a class="nav-link" href="#">アイテム</a></li>
<li class="nav-item"><a class="nav-link" href="#">問い合わせ</a></li>
</ul>
</div>
</div>
</nav>
<div style="height: 1000px; background-color: aqua;">
<h1>1000pxの高さのコンテンツ</h1>
</div>
<div style="height: 1000px; background-color: red;">
<h1>1000pxの高さのコンテンツ</h1>
</div>コードの解説
ポイントとしては、コメントがある箇所になります。
- sticky-topを使って、positionの設定をstickyにすることで、固定スクロールできるようにしています。
実行結果
以下のように、スクロールをしてもナビゲーションバーは上部に固定しながらスクロールできます。
fixedでナビゲーションバーを固定スクロールにする方法
ソースコードを実装していきます。
<!-- fixed-topで固定 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="#">ホーム</a></li>
<li class="nav-item"><a class="nav-link" href="#">アイテム</a></li>
<li class="nav-item"><a class="nav-link" href="#">問い合わせ</a></li>
</ul>
</div>
</div>
</nav>
<!-- 最初のコンテンツはナビゲーションバーの高さのパディングをとる -->
<div style="height: 1000px; padding-top: 60px; background-color: aqua;">
<h1>1000pxの高さのコンテンツ</h1>
</div>
<div style="height: 1000px; background-color: red;">
<h1>1000pxの高さのコンテンツ</h1>
</div>コードの解説
ポイントは、コメントがある箇所になります。
- fixed-topクラスを指定することで、positionをfixedにして、位置を固定させています。
- ナビゲーションバーの最初のコンテンツには、上部にナビゲーションバーの高さのパディングをとる必要があります。
実行結果
実行結果は、stickyのやり方と変わりはないです。
まとめ
やり方としては、どちらでも問題ないため、プロジェクトにあっているやり方を使うといいです。
