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>を任意のクラスで囲んで

下記CSSを追加

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

最後にJavaScript(jQuery)の設定

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

 

 

スポンサーリンク