Javascript 在 Bootstrap 中使滚动导航栏粘在浏览器顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11275381/
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
Make Scrolling NavBar Stick At Top Of Browser In Bootstrap
提问by user1493194
I'm new to Twitter Bootstrap and want to have a NavBar at the bottom of a deep'ish MastHead and when the user vertically scrolls the page and the NavBar gets to the top of the page, change the style to so that the NavBar becomes Fixed. The effect I want is the same as http://www.happycog.com/only using the Bootstrap NavBar.
我是 Twitter Bootstrap 的新手，希望在深的 MastHead 底部有一个 NavBar，当用户垂直滚动页面并且 NavBar 到达页面顶部时，将样式更改为固定的。我想要的效果和http://www.happycog.com/一样，只使用 Bootstrap NavBar。
So, the real question is how to trigger the navbar-fixed-top style when the NavBar is scrolled to position 0 ie: the top of the browser.
所以，真正的问题是当 NavBar 滚动到位置 0 时如何触发 navbar-fixed-top 样式，即：浏览器的顶部。
Any ideas or pointers would be appreciated. Thank you.
任何想法或指针将不胜感激。谢谢你。
回答by Evert Arnould
The CSS class navbar-fixed-topis what you want to add.
CSS 类navbar-fixed-top是您要添加的内容。
Here's an example:
下面是一个例子：
<nav class='navbar navbar-inverse navbar-fixed-top sticky' role='navigation'>
<!-- nav content -->
</nav>
回答by swider
You'll have to use javascript to do this. Here's a solution that relies on jQuery to convert the navbar positioning to fixed once it gets to the top of the page as well as stick a temporary div in its place to prevent the layout from changing.
您必须使用 javascript 来执行此操作。这是一个解决方案，它依赖于 jQuery 将导航栏定位转换为固定，一旦它到达页面顶部，并在其位置粘贴一个临时 div 以防止布局发生变化。
回答by Vitalii Fedorenko
You can try CSS3 sticky position:
您可以尝试使用 CSS3 粘贴位置：
.sticky {
position: sticky;
top: 10px; /* When the element reaches top: 10px, it becomes fixed. */
z-index: 100;
}
Browser support: http://caniuse.com/#feat=css-sticky
回答by Vin.X
I believe this is what you are looking for: http://www.w3schools.com/bootstrap/bootstrap_affix.asp
我相信这就是你要找的：http: //www.w3schools.com/bootstrap/bootstrap_affix.asp
回答by lorenalexm
In aiming for browser compatibility, the following might be of more use.
为了实现浏览器兼容性，以下内容可能更有用。
.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 10px;
z-index: 100;
}
