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

スクロールによる動的なナビゲーション バーの色

プロジェクトで、下にスクロールした後にナビゲーション バーが背景色を取得する問題に直面していると述べました。 。これを解決するには、スクロール位置に基づいてナビゲーションバーの色を変更するソリューションを実装できます。

JavaScript 実装:

これを実現するには、次の JavaScript コードを追加します。 HTML ファイルのヘッダーに次のように追加します。

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

このスクリプトはスクロール位置を継続的に監視します。スクロールトップの値がナビゲーションバーの高さを超えると、「scrolled」というクラスがナビゲーションバーに追加され、色の変更がトリガーされます。

CSS スタイリング:

ナビゲーションバーの色を更新し、スタイルシートを作成して次の内容を含めます。 CSS:

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

「#fff」の値は好みの色にカスタマイズできます。 「スクロール」クラスがナビゲーションバーに適用されると、その背景色はスムーズに白に移行します。

例:

機能を説明するには、以下を参照してください。次の JsFiddle:

[JsFiddle Link]

この例では、下にスクロールするとナビゲーションバーが白になります。このソリューションを実装すると、スクロール位置に基づいてナビゲーション バーの色を動的に効果的に変更できます。

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