Bootstrapのナビゲーションバー（Navbar）をスクロールで出したい

Bootstrapのナビゲーションバー（Navbar）は

上に固定（標準）　・・・　特に追加設定する必要なし（Bootstrap3では「.navbar-static-top」が必要）

最上部に固定　・・・　「.fixed-top」（Bootstrap3では「.navbar-fixed-top」）

最下部に固定　・・・　「.fixed-bottom」（Bootstrap3では「.navbar-fixed-bottom」）

最上部に達したら固定　・・・　「.sticky-top」（Bootstrap4で追加）

が選択できます。

今回の希望はBootstrapのナビゲーションバー（Navbar）をスクロールで出したいということ。

Bootstrapのナビゲーションバー（Navbar）をスクロールで出す

ナビゲーションバーをスクロールで出す解説はいろいろなサイトにありますがBootstrapと相性が良かったのが下記サイトで紹介されていた方法。

参考　jQuery animateでスクロールするとスライドして現れる「ヘッダーバー」を実装する方法

Bootstrapの<nav>～</nav>を任意のクラスで囲んで

<div class="cb-header">
<nav>
～
</nav>
</div>

<nav>

～

</nav>

</div>

下記CSSを追加

.cb-header {
  position: fixed; /* ヘッダーバーを固定 */
  top: 0; /* 上から0の位置に固定 */
  left: 0; /* 左から0の位置に固定 */
  display: none; /* ヘッダーバーを非表示 */
}

.cb-header {

position: fixed; /* ヘッダーバーを固定 */

top: 0; /* 上から0の位置に固定 */

left: 0; /* 左から0の位置に固定 */

display: none; /* ヘッダーバーを非表示 */

}

Bootstrapでは下記で上手く動きました

.cb-header {
  position: fixed; /* ヘッダーバーを固定 */
  top: 0; /* 上から0の位置に固定 */
  left: 0; /* 左から0の位置に固定 */
  width: 100%;/* 100%表示 */
  display: none; /* ヘッダーバーを非表示 */
  z-index: 1000;/*　他のアイテムに対して最上位のレイヤーになるように */
}

.cb-header {

position: fixed; /* ヘッダーバーを固定 */

top: 0; /* 上から0の位置に固定 */

left: 0; /* 左から0の位置に固定 */

width: 100%;/* 100%表示 */

display: none; /* ヘッダーバーを非表示 */

z-index: 1000;/*　他のアイテムに対して最上位のレイヤーになるように */

}

最後にJavaScript（jQuery）の設定

$(function () {

  // scrollイベントを取得した際の処理を定義
  $(window).on("scroll", function () {
    // scrollTop()が0より大きい場合
    if ($(this).scrollTop() > 0) {
      // ヘッダーバーをslideDownして表示
      $(".cb-header").slideDown();
    // scrollTop()が0の場合
    } else {
      // ヘッダーバーをslideUpして非表示
      $(".cb-header").slideUp();
    }
  });

});