スクロール時にブートストラップ ナビゲーションバーをアニメーション化または縮小するにはどうすればよいですか?

ブートストラップを使用してスクロール時の NavBar をアニメーション化/縮小する

スクロール時の NavBar の動作を制御すると、Web サイトでのユーザー エクスペリエンスが大幅に向上します。 Bootstrap は、さまざまな方法を使用してこの問題に対する解決策を提供します。

Bootstrap 5:

Bootstrap 5 では、以前の Affix コンポーネントと同様の効果を提供する Sticky-Top クラスが導入されています。スクロール中のページ上部の NavBar を修正します。ただし、NavBar のスタイルが固定されたときに、NavBar のスタイルを変更するイベントはトリガーされません。これを実現するには、JavaScript が必要です。 1 つのアプローチは、IntersectionObserver を使用することです。

Bootstrap 4:

Bootstrap 4 では、Affix コンポーネントは使用できません。スティッキー NavBar を作成するには、position: Sticky プロパティを使用します (すべてのブラウザーでサポートされているわけではありません)。これにより、NavBar が上部に固定されますが、固定になった場合は、JavaScript を使用して NavBar のスタイルを切り替える必要があります。この目的には、IntersectionObserver または ScrollPos-Styler などの jQuery プラグインを利用できます。

追加のメソッド:

あるいは、jQuery の $(window).scroll( ) 関数を使用して、特定のスクロール位置で NavBar のスタイルを変更します。このアプローチは、NavBar が変更される正確な位置がわかっている場合に適しています。

実装例:

• [Sticky Top Navbar - IntersectionObserverデモ](https://codepen.io/ChristianMartinelli/pen/jLLYEa)
• [スティッキー トップ ナビゲーションバー - jQuery デモ](https://codeply.com/go/62Roy6RDOa)

その他の例と詳細については、以下を参照してください。リソース:

• https://getbootstrap.com/docs/5.1/components/navbar/#sticky-top
• https://codeply.com/go/62Roy6RDOa
• https://www.itsolutionstuff.com/post/Beautiful-sticky-navbar-using-bootstrap-4-with-jquery-javascript-example.html

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