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

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

最初は背景色のないナビゲーションバーを実現し、スクロール後に徐々に色を変更するには、JavaScript の組み合わせが必要ですとCSS

JavaScript:

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

このコードは、ドキュメントの垂直スクロール位置をチェックします。ナビゲーションバーの高さを超える場合は、ナビゲーションバー要素に「スクロール」するクラスを切り替えます。

CSS:

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

この CSS コードは外観を定義します。 「スクロール」クラスを持つナビゲーションバーの。白い背景色と、色を変更する際のスムーズなトランジション効果を適用します。

実装:

提供された JavaScript コードを HTML ドキュメントの先頭に追加し、 CSS コードをスタイル シートに追加すると、この動的なナビゲーション バーの色の変更を簡単に実装できます。ユーザーがページを下にスクロールすると、ナビゲーションバーは目的の背景色に徐々に移行します。

参照:

ライブ デモについては、次の JSFiddle を参照してください。 [JSFiddle](https://jsfiddle.net/qe9L725y/).

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