在 Bootstrap 中使滚动导航栏粘在浏览器顶部答案

【问题标题】：Make Scrolling NavBar Stick At Top Of Browser In Bootstrap在 Bootstrap 中使滚动导航栏粘在浏览器顶部
【发布时间】：2012-07-01 18:54:11
【问题描述】：

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

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

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

【问题讨论】：

您在booststrap doc 中的子导航中有一个示例
这是一个重复的：stackoverflow.com/questions/9179708/… 本质上你需要在滚动条到达适当的点时添加和删除固定类。

标签： javascript css twitter-bootstrap

【解决方案1】：

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

http://jsfiddle.net/T6nZe/

【讨论】：

【解决方案2】：

你可以试试 CSS3 粘性位置：

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

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

【讨论】：

position:sticky 支持非常有限，没有 Chrome、IE 或 Android caniuse.com/#search=sticky

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

这是一个例子：

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

【讨论】：

【解决方案5】：

我相信这就是您正在寻找的： http://www.w3schools.com/bootstrap/bootstrap_affix.asp

【讨论】：