打开下拉菜单时更改导航栏颜色

Question

我有一个导航栏，当向下滚动时改变颜色，即。它在开始时和滚动变成蓝色后是透明的。我使用了以下js代码：

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

我的目标是改变颜色(即当下拉菜单打开时，也可以添加类“scrolled”)。

否则，如果我使用移动电话并访问网站..如果网站没有滚动，导航栏是透明的，下拉菜单也是一样的，但我想避免它。

当下拉菜单打开时，有没有可能在这段js代码中添加条件"add class scrolled“？

非常感谢并为这个简单的问题感到抱歉，但这是我第一次处理js。曼纽尔

Answer 1

如果您在导航栏中添加了bg-light或任何bg-*类，它将不允许您显式设置背景颜色。尝试删除类为；

Html

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

Css

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

确保您选择了正确的类选择器".navbar-fixed-top"