twitter-bootstrap 滚动后 twitter bootstrap 修复导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17063665/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
twitter bootstrap fix navbar after scrolling
提问by Boss Nass
I have a nav-bar that starts off at about 200px from the top of the page on load. As I scroll down, I would like the nav-bar to "affix" itself to the very top of the page and be visible as I scroll through the rest of the content. I am able to get the nav-bar to stay in place though 200px from the top, and it ignores the content i have pulled right and pulls it all to the left. i need to be ensured that the navbar remains visible and that the layout/style is the same the whole way through.
我有一个导航栏，它在加载时从页面顶部开始约 200 像素。当我向下滚动时，我希望导航栏将自身“附加”到页面的最顶部，并在我滚动浏览其余内容时可见。我能够让导航栏保持在距离顶部 200 像素的位置，并且它忽略了我向右拉的内容并将其全部拉到左边。我需要确保导航栏保持可见并且布局/样式在整个过程中都是相同的。
below is my jsfiddle which shows what i am having trouble with
下面是我的 jsfiddle，它显示了我遇到的问题
<!-- Begin Logo / Search -->
<header class="masthead">
<div class="row">
<div class="span6">
<div class="logo pull-left">
<h1><a href="/">name</a></h1>
</div>
</div>
<div class="span6">
<div class="pull-right hidden-phone">
<form class="search" action="/search" id="site-search">
<input type="hidden" name="records" value="6">
<div class="input-append">
<input type="text" name="q" class="search_box" placeholder="Search" value="" autocomplete="off" />
<button class="btn" type="submit"><i class="icon-search"></i></button>
</div>
</form>
</div>
</div>
</div>
</header>
<!-- Begin Navbar -->
<div>
<div class="navbar navbar-static">
<div class="navbar-inner" id="mastnav">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav"><li><a href="#">nav</a> </li></ul>
<ul class="nav pull-right">
<li>
<a href="/cart"><i class="icon-shopping-cart"></i> <span id="cart-count">1</span></a>
</li>
</ul>
</div>
</div>
</div>
</div><!-- /.navbar -->
</div>
回答by Zim
Once the nav becomes affixit no longer follows the normal navbar CSS styles. You could give an id to the outer DIV container, and then set this as the `affix' element. Use CSS to make sure it stays 100% width.
一旦导航变成affix它不再遵循正常的导航栏 CSS 样式。您可以为外部 DIV 容器提供一个 id，然后将其设置为“词缀”元素。使用 CSS 确保它保持 100% 的宽度。
#nav.affix {
position: fixed;
top: 0;
width: 100%
}
Related:
Affix Bootstrap flickers after affix-bottom reached and scrolling back top
回答by Jesús Carrera
Here is the modified jsfiddle that accomplishes what you want:
这是完成您想要的修改后的 jsfiddle：
Update: sorry! pasted the wrong jsfiddle! Realised when I sow the negative vote! I'll do it again and update in a moment
更新：对不起！粘贴了错误的 jsfiddle！当我播下反对票时才意识到！我会再做一次，稍后更新
Update: here is is:
更新：这里是：
As an extra note, you can declare the affix in the html with data-spy="affix"and data-offset-top="", so no need for an extra inline script
作为额外的说明，您可以使用data-spy="affix"and在 html 中声明词缀data-offset-top=""，因此不需要额外的内联脚本
回答by Michael Davenport
<script type="text/javascript">
$(document).ready(function(e) {
$(window).scroll(function () {
if ($(window).scrollTop() > $('.navbar').offset().top) {
$('.navbar').addClass('navbar-fixed-top');
$('.navbar').removeClass('navbar-static-top');
} else {
$('.navbar').removeClass('navbar-fixed-top');
$('.navbar').addClass('navbar-static-top');
}
});
});
</script>
回答by SaurabhLP
You need to attached affix to a outer container of the navbar, i have done some changes to it...
您需要将词缀附加到导航栏的外部容器上，我对其进行了一些更改...
No change on this Js, but the html structure:-
这个 Js 没有变化，但是 html 结构：-
$('#mastnav').affix({
offset: {
top: 0
}
});
Demo:- http://jsfiddle.net/KUPbD/1/
