Javascript 一个div中有多个类

这件事困扰了我一整天，在我放弃之前，我想我会看看是否有人能帮我

我有一个粘性标题，滚动时会向下移动。我使用的是bootstrap，在一个div中有两个类-

navbar

用于常规视图，而

navbarSticky

用于滚动时的粘性效果

问题是当我在div里有两个类时，

navbarSticky

类完全消失，但是

navbarSticky

工作，只有当

navbarSticky

类从div中删除时，

navbarSticky

才会返回。我想这一定与CSS有关-

navbarSticky

具有比

navbar

更高的优先级

如果有人能帮我，我会非常感激的

这是我的导航栏：

<div class="navbar navbarSticky navbar-inverse navbar-static-top" role="navigation">
    <div class="container">
        <div class="row">
            <div class="logo col-xs-6 col-md-6">
                <ul class="pull-left">
                    <li><a href="">Theme</a></li>
                </ul>
            </div>
            <div class="nav col-xs-6 col-md-6">
                <ul class="pull-right">
                    <li><a href="">Home</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Products</a>
                        <ul>
                            <li><a href="">Example Dropdown</a></li>
                            <li><a href="">Example Dropdown</a></li>
                            <li><a href="">Example Dropdown</a></li>
                            <li><a href="">Example Dropdown</a></li>
                        </ul>
                    </li>
                    <li><a href="">Services</a></li>
                    <li><a href="">Join</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </div>
            <div class="menu-button col-xs-6 col-md-6">
                <ul class="pull-right">
                    <li>
                        <button id="menu-button" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="nav-dropdown" class="nav-dropdown col-xs-12 col-md-12">
        <ul>
            <li id="form">
                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
            </li>
            <li><a href="">Home</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Products</a>
                <ul>
                    <li><a href="">Example Dropdown</a></li>
                    <li><a href="">Example Dropdown</a></li>
                    <li><a href="">Example Dropdown</a></li>
                    <li><a href="">Example Dropdown</a></li>
                </ul>
            </li>
            <li><a href="">Services</a></li>
            <li><a href="">Join</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Contact</a></li>
        </ul>
    </div>
</div>

这是我的css

.navbar
{
background: #ffffff;
color: #2d3238;
position: relative;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
height: 100px;
}
.navbarSticky
{
background: #ffffff;
box-shadow: 1px 5px 15px #ccc;
color: #2d3238;
display: none;
top: 0;
height: 100px;
left: 0;
right: 0;
position: fixed;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
z-index: 9999;
}

更新：

---

我终于让它工作了，我只需要将jquery中的navbar更改为.navbar，但现在我有了一些从navbar跨越时navbarSticky的wierd跳跃效果。有人能帮忙吗？

navbarSticky

覆盖

navbar

上的每个属性。不是因为

navbar

类消失了，而是因为它自己的css属性都不占主导地位，所以在主导的

navbarSticky

类被删除之前，你看不到任何内容。

你能把你的代码放到一个？它使人们更容易了解问题所在。您是否尝试过将navbarsticky从初始html中删除？在你第一次向下滚动之前，它不应该在那里，对吗？为什么不使用导航栏上的position:fixed？或者，由于您使用的是引导，请使用“navbar navbar fixed top”类。它一开始不是位于屏幕顶部吗？首先，您不需要重复css规则。如果在元素上始终有

.navbar

类，则无需在

navbarSticky

中重写背景等。其次，我认为你应该重新考虑一下你的代码。目前我想首先让导航栏总是固定的。如果这样做有效，您可以添加javascript使其消失/显示在滚动条上。您可以通过添加或删除一个类（例如：

.hidden

，类似于

.hidden{top:-100px；}

）来实现这一点。感谢您的快速响应。我在导航栏上方有一个顶栏，所以使用position:fixed将不起作用。我试着离开html的NavBarouit，但那也不起作用，我只是没有想法了lol它让我发疯我想我花了太长时间在它上面，我的大脑被炸了lol。当我使用单独的div时，它起作用了，但那是很多样式和代码，我希望通过使用相同的div可以避免

.navbar
{
background: #ffffff;
color: #2d3238;
position: relative;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
height: 100px;
}
.navbarSticky
{
background: #ffffff;
box-shadow: 1px 5px 15px #ccc;
color: #2d3238;
display: none;
top: 0;
height: 100px;
left: 0;
right: 0;
position: fixed;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
z-index: 9999;
}