[英]Make Scrolling NavBar Stick At Top Of Browser In Bootstrap
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.我是 Twitter Bootstrap 的新手,希望在深的 MastHead 底部有一个 NavBar,当用户垂直滚动页面并且 NavBar 到达页面顶部时,将样式更改为固定的。 The effect I want is the same as http://www.happycog.com/ only using the Bootstrap 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.
谢谢你。
The CSS class navbar-fixed-top
is 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>
You'll have to use javascript to do this.您必须使用 javascript 来执行此操作。 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.
这是一个解决方案,它依赖于 jQuery 将导航栏定位转换为固定,一旦它到达页面顶部,并在其位置粘贴一个临时 div 以防止布局发生变化。
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浏览器支持: http : //caniuse.com/#feat=css-sticky
我相信这就是你要找的: http : //www.w3schools.com/bootstrap/bootstrap_affix.asp
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.