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

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

スクロール時にナビゲーションバーをアニメーション化または縮小するためのソリューションを検索すると、次のような問題が発生することがよくあります。古い情報、特に Bootstrap 3 に関連する情報に注意してください。この記事は、Bootstrap の現在のソリューションに焦点を当てています。 4 と 5.

ブートストラップ 5

ブートストラップ 5 は、スクロール時に静的から固定へのナビゲーションバー効果を作成するためのスティッキートップ クラスを保持します。あるいは、JavaScript IntersectionObserver を利用して「トリガー」要素を監視し、トリガーが表示されたときに CSS クラスをナビゲーションバーに適用することもできます。このクラスには、ナビゲーションバーの外観と位置を調整するために必要な CSS を含めることができます。

Bootstrap 4

Bootstrap 4 には Affix コンポーネントがないため、sticky-ナビゲーションバーが一番上に到達したときにそれを固定するトップクラス。ただし、このメソッドだけでは、ナビゲーションバーがアフィックスであることを示す JavaScript イベントをトリガーしません。その結果、ナビゲーションバーが固定されると、ナビゲーションバーのスタイルを操作するために JavaScript が必要になります。 IntersectionObserver は、ナビゲーションバーの上のトリガー要素がビューポートに到達し、「スティッキー」状態をトリガーするときを検出するのに適したオプションです。

jQuery の代替手段

Bootstrap のビルトインを使用する以外に、機能的には、ScrollPos-Styler などの jQuery プラグインを使用したり、独自の jQuery スクリプトを作成して制御することもできます。スクロール時のナビゲーションバーのスタイル。 1 つのアプローチは、data-toggle="affix" を使用して固定トップ ナビゲーション バーを定義し、jQuery を使用してスクロール位置を監視し、条件に応じて .affix クラスを切り替えることです。

追加リソース

• [スティッキートップナビゲーションバー - IntersectionObserverデモ](https://codepen.io/pdreier/pen/QWNYrrZ)
• [スティッキー トップ ナビゲーションバー - jQuery デモ](https://codeply.com/go/62Roy6RDOa)
• [Bootstrap 4 スクロール時の Navbar スタイルの変更の詳細]例](https://wrapbootstrap.com/theme/change-navbar-style-on-scroll-bootstrap-147)

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