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

スクロール後のナビゲーションバーの色の変更

質問:

背景を削除するにはどうすればよいですか?最初はナビゲーションバーから色を選択し、スクロールしたら新しい色を追加します

シナリオ:

問題の Web サイト https://attafothman.olympe.in/ には、上部に黒いナビゲーションバーがあり、固定された状態を維持する必要があります。位置。ただし、特定の div の下にスクロールすると、ナビゲーションバーは自動的に新しい背景色を取得します。

解決策:

この問題に対処するには、JavaScript と CSS を組み合わせます。は

JavaScript:

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

この JavaScript コードは、スクロール時にイベント リスナーをトリガーします。スクロール位置がナビゲーションバーの高さを超えると、「scrolled」という名前のカスタム CSS クラスが要素に追加されます。

CSS:

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

この CSSルールは、「スクロール」クラスの動作を定義します。 「scrolled」クラスが追加されると、「navbar-fixed-top」クラスを持つ要素に白一色の背景色が割り当てられます。 「! important」キーワードにより、このルールは競合するスタイルを確実にオーバーライドします。

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