如何使用 Twitter Bootstrap 将导航栏置于顶部？

Question

我有一个导航栏，在加载时从页面顶部开始大约 50 像素。当我向下滚动时，我希望导航栏将自己“附加”到页面的最顶部，并且在我滚动浏览其余内容时可见。这类似于官方引导教程 Github 网站上的导航栏。
通过使用

<ul class = "nav nav-list bs-docs-sidenav affix">

但是一旦我在上面添加“-top”，它看起来就像

<ul class = "nav nav-list bs-docs-sidenav affix-top">

当我向下滚动页面时，导航栏不再保持原位并从视图中消失。

jsfiddle without "-top"

jsfiddle with "-top"

当我向下滚动时，如何将导航栏固定在页面顶部？

Answer 1

需要纠正的地方很少。见固定jsfiddle。

1. Affix 在 Bootstrap 中实现为使用 jQuery 的 JavaScript 代码，您既没有包含 BS 的 JS 也没有包含 jQuery
2. 要打开元素的词缀，根据official documentation，使用data-spy="affix"，而不是class="affix"。你为什么这么做？ affix 和 affix-top 类有不同的用途——它们告诉你当时词缀的状态。如果此时你的元素是固定的，则类是affix，如果它是可滚动的，则BS将类更改为affix-top。
3. 您必须告诉 BS 何时需要修复该元素。以像素为单位的距离（您必须滚动多少）由属性data-offset-top 设置。还要在 CSS 中指定导航修复后的外观。如果它被绑定到顶部（窗口边框和元素之间没有空间），那么.affix { top:0; } 会这样做。