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>

下記CSSを追加

.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;/* 他のアイテムに対して最上位のレイヤーになるように */
}

最後に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();
    }
  });

});

※<nav>~</nav>に「fixed-top」を入れてしまうとアニメーションが止まってしまいます。

 

 

コメント

タイトルとURLをコピーしました