如何只添加背景颜色以滚动菜单？

Question

我有一页：

链接

代码

<div class="content-menu">
                    <div class="navbar navbar-inverse bs-docs-nav" role="banner" id="menu-top">
                        <div class="navbar-header">
                         //some code html
                       </div>
                   </div>    
</div>

顶部菜单id要添加到滚动CSS类，如下所示

代码CSS:

.bg-scroll{
  background: red;
}

我试图使用下面的JS代码

代码JS:

$(window).scroll(function() {
    $("#menu-top").addClass("bg-scroll");
});

你能告诉我出了什么问题吗?代码很简单.滚动函数工作平稳，但不添加相应的类。

提前感谢！

Answer 1

您所拥有的代码应该工作，您可能只是有一个css选择器的特殊性问题。

基于ID的CSS选择器(如#menu-top )比基于类的CSS选择器(如.bg-scroll )具有更高的优先级

尝试使.bg-scroll的CSS选择器更具体：

#menu-top.bg-scroll { background: red; }

或者更可重用：

.navbar.bg-scroll { background: red; }

使用!important也能工作，但通常被认为是一种不好的做法，因为它会使调试变得更加困难：

.bg-scroll { background: red !important; }

了解更多关于最佳实践的信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity