簡単!!bootstrap4でメニューバーを動的に固定する方法

はじめに

タイトルが少しわかりにくいので補足すると、いろいろなサイトでよくみる「最初はメインビジュアルの下にあったメニューバーが、スクロールすると上部に固定されて追従してくる」やつです。

bootstrap4のドキュメントには上部固定、下部固定しか記載がありませんが、すごく簡単にできるのでおススメです。

完成系はこちら

先に完成系のソースを掲載します。

<nav>
  ナビゲーションの中身
</nav>
<wrap>
  次の要素
<wrap>

～～省略～～

<script>
// ヘッダー固定スクロール
$(window).on('scroll', function() {
    $('.nav').toggleClass('fixed-top', $(this).scrollTop() > 407);
    $('.wrap').toggleClass('adjust', $(this).scrollTop() > 407);
});
</script>
</body>

stylesheet

.adjust {
    margin-top: 58px;
}

解説

bodyの閉じタグ直前にscriptを追加

以下を追加します。

<script>
// ヘッダー固定スクロール
$(window).on('scroll', function() {
    $('.nav').toggleClass('fixed-top', $(this).scrollTop() > 407);
});
</script>

boostrapを用いてページを作っている場合はナビゲーションメニューをnavで囲っていると思いますので、そのタグに対して一定スクロール時にfixed-topというクラスを追加しています。

fixed-topクラスはBootstrapで定義済みのクラスなので、これだけである程度良い感じになります。

スクロールの距離の微調整は、以下のscriptを書いてコンソールに表示させてあげるとやりやすいです。

window.addEventListener("scroll", () => {
  console.log(window.pageYOffset);
});

スクロールイベント発生時に座標をコンソールに表示してくれるので、scrollTop～の数値指定に役立ちます。

navの次の要素を調整する

stylesheetを書かずにスマートに終われるかと思いきや、これだとナビゲーションが固定されたときにガタっと他の要素がズレてしまうので、惜しいですが以下も追加しました。

<script>
// ヘッダー固定スクロール
$(window).on('scroll', function() {
    $('.nav').toggleClass('fixed-top', $(this).scrollTop() > 407);
    $('.wrap').toggleClass('adjust', $(this).scrollTop() > 407);
});
</script>

ナビゲーションバーが固定されたときに、直後の要素に対して同じようにcssクラスを付与し、以下のstyleを定義します。

.adjust {
    margin-top: 58px;
}

※各数値はサイトに応じて書き換えてください。