17

我是 Twitter Bootstrap 的新手，希望在深的 MastHead 底部有一个 NavBar，当用户垂直滚动页面并且 NavBar 到达页面顶部时，将样式更改为使 NavBar 变为固定的。我想要的效果和http://www.happycog.com/一样，只是使用 Bootstrap NavBar。

所以，真正的问题是如何在 NavBar 滚动到位置 0 时触发 navbar-fixed-top 样式，即：浏览器的顶部。

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

4

5 回答 5

8

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

这是一个例子：

<nav class='navbar navbar-inverse navbar-fixed-top sticky' role='navigation'>
    <!-- nav content -->
</nav>
于 2013-12-30T23:42:35.770 回答
5

您必须使用 javascript 来执行此操作。这是一个解决方案，它依赖于 jQuery 将导航栏定位转换为固定位置，一旦它到达页面顶部，并在其位置粘贴一个临时 div 以防止布局更改。

http://jsfiddle.net/T6nZe/

于 2012-06-30T20:11:24.893 回答
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

于 2013-05-27T01:05:35.793 回答
2

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

于 2016-05-12T23:14:57.227 回答
1

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

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 10px;
  z-index: 100;
}
于 2013-11-27T15:55:33.017 回答