スクロール時にナビゲーションバーの色を動的に変更するにはどうすればよいですか?

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

問題:

透明な背景の設定ページがスクロールされるとナビゲーション バーの色が機能しないため、新しい背景色が表示されます。

解決策:

スクロール後にナビゲーション バーの色を変更するには、次の手順に従います:

1. JavaScript を追加します見出し:

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

   ログイン後にコピー

2. ナビゲーションをスタイルするための CSS の追加バー:

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

   ログイン後にコピー

実装:

JavaScript コードはページのスクロールを監視します。スクロールがナビゲーション バーの高さを超えると、scrolled という名前のクラスがナビゲーション バーに追加されます。 CSS コードは、スクロールされたクラスが存在する場合、ナビゲーション バーのスタイルを白い背景色で設定します。これにより、背景色が 200 ミリ秒にわたってスムーズに遷移します。

このソリューションにより、ナビゲーション バーがスクロールされていないときに透明な背景色を設定し、スクロールが発生すると背景色を白に変更できます。

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