Question

我有这个页面：

代码HTML：

<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类，如下所示

CODE CSS：

.bg-scroll{
  background: red;
}

我尝试使用下面的JS代码

CODE 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

如何添加背景颜色才能滚动菜单？

1 个答案: