粘滞式导航栏在向下滚动时创建右边距

时间：2015-06-18 01:16:40

标签： css twitter-bootstrap

我正在尝试创建一个导航栏（引导带），一旦向下滚过它就会粘到顶部。我能够使用affix插件实现这种行为，但有一个小故障。导航栏在向下滚动时创建一定量的右边距。我无法解决问题。请帮我解决这个问题。

这是导航栏的html代码

$(function () {
    $('#nav-wrapper').height($("#nav").height());
    $('#nav').affix({
        offset: {
            top: $('#nav').offset().top
        }
    });
});
.navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
}
.navbar .navbar-collapse {
    text-align: center;
}
@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }
    .navbar .navbar-collapse {
        text-align: center;
    }
}
@media (min-width: 768px) {
    .navbar {
        border-radius: 15
    }
}
.navbar-toggle {
    border-radius: 15
}
.navbar-toggle .icon-bar {
    border-radius: 0
}
.navbar {
    background: #700000;
    margin-bottom: auto;
    border-color: #384248;
    width: 100%;
}
@media (min-width: 768px) {
    .navbar-nav > li > a {
        padding-top: 17px;
        padding-bottom: 17px;
    }
}
#nav.affix {
    position: fixed;
    top: 0;
    width: 100%;
    margin: 0px;
    -webkit-transition: all .6s ease-in-out;
}
#nav > .navbar-inner {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
}

/* To simulate overflow for demo purposes only */
html { height: 200%; } body { height: 100%; }
<!-- External Resources -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!-- External Resources -->

<!-- Nav Bar Section -->
<div id="nav-wrapper">
    <div class = "row" id="nav-row">
        <nav class="navbar navbar-inverse navbar-static-top" id = "nav" role="navigation">	
            <div class = "container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavBar">
                        <!--<span class="sr-only">Toggle navigation</span>-->
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand visible-xs" href="index_hth.html">Navigation</a>
                </div> <!-- end navbar-header div-->
                <div class="collapse navbar-collapse" id = "myNavBar">
                    <ul class="nav navbar-nav" id="menu-bar">
                        <li><a href="#" class="active">Home</a></li>
                        <li><a href="offers.html">Offers</a></li>
                        <li><a href="AboutUs.html">About Us</a></li>
                        <li><a href="ContactUs.html">Contact Us</a></li>
                    </ul>
                </div> <!-- end collapse div -->	
            </div><!-- end container-fluid-->	
        </nav> <!-- end nav -->	
    </div>
</div>
<!-- Nav Bar Section End-->

请仔细研究并帮助我解决问题。提前谢谢。

1 个答案:

答案 0 :(得分：1)

使用代码检查器，我发现#nav-wrapper .row#nav-row设置了负边距。

特异性规则和margin: 0解决了问题

#nav-wrapper .row#nav-row {
    margin: 0;
}

＆＃13;
＆＃13; 
$(function () {
    $('#nav-wrapper').height($("#nav").height());
    $('#nav').affix({
        offset: {
            top: $('#nav').offset().top
        }
    });
});
＆＃13; 
#nav-wrapper .row#nav-row {
    margin: 0;
}
.navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
}
.navbar .navbar-collapse {
    text-align: center;
}
@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }
    .navbar .navbar-collapse {
        text-align: center;
    }
}
@media (min-width: 768px) {
    .navbar {
        border-radius: 15
    }
}
.navbar-toggle {
    border-radius: 15
}
.navbar-toggle .icon-bar {
    border-radius: 0
}
.navbar {
    background: #700000;
    margin-bottom: auto;
    border-color: #384248;
    width: 100%;
}
@media (min-width: 768px) {
    .navbar-nav > li > a {
        padding-top: 17px;
        padding-bottom: 17px;
    }
}
#nav.affix {
    position: fixed;
    top: 0;
    width: 100%;
    margin: 0px;
    -webkit-transition: all .6s ease-in-out;
}
#nav > .navbar-inner {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
}

/* To simulate overflow for demo purposes only */
html { height: 200%; } body { height: 100%; }
＆＃13; 
<!-- External Resources -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!-- External Resources -->

<!-- Nav Bar Section -->
<div id="nav-wrapper">
    <div class = "row" id="nav-row">
        <nav class="navbar navbar-inverse navbar-static-top" id = "nav" role="navigation">	
            <div class = "container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavBar">
                        <!--<span class="sr-only">Toggle navigation</span>-->
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand visible-xs" href="index_hth.html">Navigation</a>
                </div> <!-- end navbar-header div-->
                <div class="collapse navbar-collapse" id = "myNavBar">
                    <ul class="nav navbar-nav" id="menu-bar">
                        <li><a href="#" class="active">Home</a></li>
                        <li><a href="offers.html">Offers</a></li>
                        <li><a href="AboutUs.html">About Us</a></li>
                        <li><a href="ContactUs.html">Contact Us</a></li>
                    </ul>
                </div> <!-- end collapse div -->	
            </div><!-- end container-fluid-->	
        </nav> <!-- end nav -->	
    </div>
</div>
<!-- Nav Bar Section End-->
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题