Question

这一直在我头脑中醒来，在我放弃之前我想我是否会有人能帮助我。

我有一个粘贴的标题，在滚动时向下移动页面。我正在使用bootstrap并且在一个div中有两个类 - navbar用于常规视图，navbarSticky用于滚动时的粘性效果。

问题是当我在div中有两个类时，navbar类完全消失但navbarSticky有效，navbar只会在删除navbarSticky类时返回来自div。我认为它必须与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>

这是我的jquery

$(window).scroll(function (){

if($(window).scrollTop() > 65)
{
    $("navbar").addClass('navbarSticky');
    $(".navbarSticky").css({
        'display':'block'
    })
}
else{
    $("navbar").removeClass('navbarSticky');
    $(".navbarSticky").css({
        display:'none'
    })
}
});

这是我的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但是现在我从导航栏越过navbarSticky时会有一些奇怪的跳跃效果。有人可以帮忙吗？

Answer 1

navbarSticky会覆盖navbar上的每个媒体资源。 navbar类不会消失，并且它的css属性都不会占主导地位，因此在删除支配navbarSticky类之前，您不会看到它。< / p>

一个div中有多个类

1 个答案: