スクロール時に Navbar の背景色を変更するにはどうすればよいですか?

スクロール時にナビゲーション バーの色を動的に変更する

ページを下にスクロールするとナビゲーション バーの色が変化し、Web サイトのナビゲーション エクスペリエンスが向上します。この質問では、ユーザーは、最初にナビゲーション バーの背景色を削除し、特定の div を越えてスクロールするときに色を適用するためのガイダンスを求めました。

解決策:

この解決策には JavaScript と CSS の組み合わせが必要です。まず、次の JavaScript コードを HTML ドキュメントの head セクションに追加します。

$(function () {
  $(document).scroll(function () {
    var $nav = $(".navbar-fixed-top");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
  });
});

この JavaScript コードは、ウィンドウのスクロール位置を監視し、スクロールがナビゲーション バーの位置を超えたときにナビゲーション バーの「スクロール」クラスを切り替えます。バーの高さ。

次に、次の CSS コードをスタイルシート:

.navbar-fixed-top.scrolled {
  background-color: #fff !important;
  transition: background-color 200ms linear;
}

この CSS は、「スクロール」クラスがナビゲーション バーに適用されると、その背景色が 200 ミリ秒かけて滑らかに変化して白 (#fff) に変化することを保証します。

このソリューションを実装すると、ページをスクロールするときに視覚的な手がかりを提供することでユーザー エクスペリエンスを向上させる動的なナビゲーション バーを作成できます。コンテンツ。

以上がスクロール時に Navbar の背景色を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。