我尝试在我的导航栏上使用Bootstrap附加功能将其固定在顶部,一旦通过向下滚动即可到达。
HTML:
<div id="nav-wrapper">
<div class="container"><!--container-->
<div class="row" id="navigation"><!--header-->
<div class="col-md-12"><!--col-md-12-->
<div class="navbar" id="nav"><!--nav-->
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="menu">
<li><a href="http://endurancefilmsti.com/">Home</a></li>
<li><a href="http://endurancefilmsti.com/about-efti/">About EFTI</a></li>
<li><a href="http://endurancefilmsti.com/our-coaches/">Our Coaches</a></li>
<li><a href="http://endurancefilmsti.com/blog/">Blog</a></li>
<li><a href="http://endurancefilmsti.com/efti-forum/">EFTI Forum</a></li>
<li><a href="http://endurancefilmsti.com/contact-us/">Contact Us</a></li>
</ul>
</div>
</div><!--nav-->
</div><!--col-md-12-->
<div class="clearfix"></div>
</div><!--header-->
</div><!--container-->
</div>
JS:
$(function() {
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});
});
我根据Bootstrap文档的要求在CSS中设置了nav的位置。
#nav.affix {
position: fixed;
top: 0;
width: 100%;
}
#nav > .navbar-inner {
border-left: 0;
border-right: 0;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
}
答案 0 :(得分:0)
Twitter Bootstrap有一个班级.navbar-fixed-top
,您可以使用班级.navbar
将其应用于您的div。
我想这会为你做到这一点。