我是 Twitter Bootstrap 的新手,希望在深沉的 MastHead 底部有一个导航栏,当用户垂直滚动页面并且导航栏到达页面顶部时,将样式更改为,以便导航栏变为固定。我想要的效果与仅使用引导导航栏 http://www.happycog.com/相同。
因此,真正的问题是当导航栏滚动到位置 0 即:浏览器顶部时,如何触发导航栏固定顶部样式。
任何想法或指示将不胜感激。谢谢。
CSS 类navbar-fixed-top
是您要添加的内容。
下面是一个示例:
<nav class='navbar navbar-inverse navbar-fixed-top sticky' role='navigation'>
<!-- nav content -->
</nav>
你必须使用 javascript 来做到这一点。这是一个解决方案,它依靠jQuery将导航栏定位转换为固定位置,一旦它到达页面顶部,并在其位置粘贴一个临时div以防止布局更改。
http://jsfiddle.net/T6nZe/
你可以试试CSS3粘性位置:
.sticky {
position: sticky;
top: 10px; /* When the element reaches top: 10px, it becomes fixed. */
z-index: 100;
}
浏览器支持:http://caniuse.com/#feat=css-sticky
这就是你要找的:http://www.w3schools.com/bootstrap/bootstrap_affix.asp
在以浏览器兼容性为目标时,以下内容可能更有用。
.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 10px;
z-index: 100;
}