ブートストラップを使用してスクロール時にアニメーション/縮小するナビゲーションバーを作成するにはどうすればよいですか?

ブートストラップを使用してスクロール時にナビゲーション バーをアニメーション/縮小する

スクロール時に縮小するナビゲーション バーの作成は、最適化によってユーザー エクスペリエンスを向上させる一般的なデザイン要素です。小さな画面でもスペースを確保できます。これを Bootstrap で実現する方法は次のとおりです。

Bootstrap 5

Bootstrap 5 では、静的から固定へのナビゲーションバーを作成できるスティッキートップ クラスが導入されました。効果。ナビバー要素に Sticky-top を追加するだけで、ページがスクロールするときにビューポートの上部に固定されます。

Bootstrap 4

位置の使用: Sticky

1. スティッキートップクラスをnavbar 要素。
2. ナビゲーションバーがスティッキーになったときにナビゲーションバーの位置、パディング、背景を変更するように CSS を定義します。
3. JavaScript を使用して、ナビゲーションバーがビューポートの上部に達したときを検出し、スティッキー クラスを適用します。 .

IntersectionObserver の使用API

1. ナビゲーションバーがいつスティッキーになるかを示すトリガー要素を作成します。
2. このトリガー要素を監視するには IntersectionObserver API を使用します。
3. いつトリガー要素が表示されるようになり、次を使用してスティッキー クラスをナビゲーションバーに適用します。 JavaScript.

jQuery の使用

1. JavaScript イベント ハンドラーをウィンドウのスクロール イベントにアタッチします。
2. 現在のスクロール位置を確認します適切な CSS クラスをnavbar.

jQuery の使用例

<nav class="navbar navbar-inverse bg-inverse fixed-top">
    <!-- your navbar markup -->
</nav>

<script>
$(window).scroll(function() {
    if ($(document).scrollTop() > 100) {
        $('.navbar').addClass('sticky-top');
    } else {
        $('.navbar').removeClass('sticky-top');
    }
});
</script>

追加メモ

• Bootstrap 4 は、 afixコンポーネントを使用するため、上記の方法を使用することをお勧めします代わりに。
• 特定の設計要件に合わせて CSS と JavaScript を調整する必要がある場合があります。
• インスピレーションと実装のガイダンスについては、参照されたデモと例を参照してください。

以上がブートストラップを使用してスクロール時にアニメーション/縮小するナビゲーションバーを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。