如何使用Twitter Bootstrap粘贴我的导航栏？

Question

我有一个导航栏,在加载时从页面顶部开始大约50px.当我向下滚动时,我希望导航栏能够"粘贴"到页面的顶部,并在滚动浏览其余内容时可见.这类似于nav-bar在官方引导教程Github网站上所做的.
通过使用我可以让导航栏保持原位(尽管从我向下滚动页面时始终是50px)

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

但是一旦我在上面加上"-top"就好了

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

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

没有"-top"的jsfiddle

jsfiddle与"-top"

当我向下滚动时,如何让导航栏粘贴到页面顶部？

Answer 1

没有什么可以纠正的.见固定的jsfiddle.

1. 使用jQuery将Affix作为JavaScript代码在Bootstrap中实现,并且您既没有包含BS的JS也没有包含jQuery
2. 根据官方文档,打开元素的词缀,使用data-spy="affix",而不是class="affix".你为什么这么做？课程affix和affix-top服务于不同的目的 - 他们告诉你当时词缀的状态.如果当前你的元素是固定的affix,那么类是,如果它是可滚动的,则BS将类更改为affix-top.
3. 您需要告诉BS何时需要修复元素.使用属性设置以像素为单位的距离(您需要滚动多少)data-offset-top.还要在CSS中指定导航在修复时的外观.如果它绑定到顶部(窗口边框和元素之间没有空格),那么.affix { top:0; }就可以了.