打開下拉菜單時更改導航欄顏色

Question

我有一個導航欄，向下滾動時會改變顏色，即。 它在開始時是透明的，滾動后變成藍色。 我使用了以下js代碼：

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

我的目標是在下拉菜單打開時也更改顏色（即添加 class“滾動”）。

否則，如果我使用手機訪問網站。如果網站沒有滾動，導航欄是透明的，下拉菜單也是如此，但我想避免它。

當下拉菜單打開時，是否有可能在此 js 代碼中添加條件“添加 class 滾動”？

非常感謝你，很抱歉這個簡單的問題，但這是我第一次處理 js。 曼紐爾

Answer 1

如果您在導航欄中添加了bg-light或任何bg-* class，它將不允許您明確設置背景顏色。 嘗試刪除 class 作為；

Html

<nav class="navbar navbar-expand-lg navbar-light fixed-top">

Css

<style>
    .scrolled {
        background-color: blue;
        color: white;
    }
</style>

確保您選擇了正確的 class 選擇器“.navbar-fixed-top”