【Bootstrap】スクロールしてもnavbarを固定して表示する方法と、その際の留意点及び解決法

本記事の内容

・ページ上部に固定されたナビゲーションをBootstrapで実装する方法。
・その際の留意点と解決法

方法

（現在、WEBアプリを作成しているので、そのコードをそのまま例として用いることにします。)
以下のようにclass='fixed-top'とすることで、ナビゲーションをページ上部に固定できます。
これにより、スクロールしてもナビゲーションは上に表示されたままになります。

sample.html

     <div class='fixed-top'>
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
         <a class="navbar-brand" href="#">Mieruka</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
             <div class="navbar-nav">
                 <a class="nav-item nav-link active" href="#">ユーザ<span class="sr-only">(current)</span></a>
                 <a class="nav-item nav-link" href="#">新規プロジェクト</a>
                 <a class="nav-item nav-link" href="#">モーメント</a>
                 <a class="nav-item nav-link" href="#">アプリ紹介</a>
             </div> 
         </div>
     </nav>
     </div>

留意点

fixed-topで固定することでその他の要素がnavbarに重なって表示されてしまいます。
（navbarがひとつ上のレイヤーに移動して、それ以外の要素はnavbarがいなくなった分、上に詰めるイメージ。）
そのため、その他の要素を下にズラしてあげる必要があります。

解決法

このような場合は、bodyにpadding-topを適用させて、要素を下にズラすことで解決します。

sample.css

          body{ 
              padding-top: 60px; 
          }