Question

我是Twitter Bootstrap的新手，想要在深入的MastHead底部有一个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/

Answer 3

您可以尝试使用CSS3粘贴位置：

.sticky {
  position: sticky;
  top: 10px; /* When the element reaches top: 10px, it becomes fixed. */
  z-index: 100;
}

浏览器支持：http://caniuse.com/#feat=css-sticky

Answer 4

我相信这就是你要找的东西： http://www.w3schools.com/bootstrap/bootstrap_affix.asp

Answer 5

为了实现浏览器兼容性，以下内容可能更有用。

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 10px;
  z-index: 100;
}

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

5 个答案: