在Bootstrap中将滚动导航栏添加到浏览器顶部

Question

我是Twitter Bootstrap的新手,想在深入的MastHead底部有一个NavBar,当用户垂直滚动页面并且NavBar到达页面顶部时,将样式更改为以便NavBar成为固定.我想要的效果与使用Bootstrap NavBar的http://www.happycog.com/相同.

因此,真正的问题是当NavBar滚动到位置0时如何触发navbar-fixed-top样式,即:浏览器的顶部.

任何想法或指针将不胜感激.谢谢.

Answer 1

CSS类navbar-fixed-top是您要添加的.

这是一个例子:

<nav class='navbar navbar-inverse navbar-fixed-top sticky' role='navigation'>
    <!-- nav content -->
</nav>

Answer 2

你必须使用javascript来做到这一点.这是一个解决方案,依赖于jQuery将导航栏定位转换为固定一旦到达页面顶部,并在其位置粘贴临时div以防止布局更改.

http://jsfiddle.net/T6nZe/