Bootstrap Affix JavaScript组件，没有正确定位

Question

当我开始向下滚动此网页时，Bootstrap affix插件会切入<header class="jumbotron subhead"> - 此图像显示此症状：

我希望我的词缀导航不要切入<header class="jumbotron subhead">并且行为与Bootstrap的官方文档中显示的一样，它不会切入<header class="jumbotron subhead"＆gt;当你开始滚动。有没有办法用一些额外的CSS规则来解决这个问题？目前我的CSS规则应用于Affix组件与Bootstrap文档中的Affix组件完全相同，如果您检查两个网站上的附加导航，那么我不明白为什么它无法正确显示。

CSS规则：

.bs-docs-sidenav.affix {
    top: 40px;
}
.bs-docs-sidenav {
    width: 258px;
}
.bs-docs-sidenav {
    background-color: #FFFFFF;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
    margin: 30px 0 0;
    padding: 0;
    width: 228px;
}
.affix {
    position: fixed;
}
.nav-list {
    margin-bottom: 0;
    padding-left: 15px;
    padding-right: 15px;
}
.nav {
    list-style: none outside none;
    margin-bottom: 20px;
    margin-left: 0;
}
ul, ol {
    margin: 0 0 10px 25px;
    padding: 0;
}

我正在处理的网站（破解词缀）：

http://www.bestcastleintown.co.uk/boot/test2.html#slides

Bootstrap网站（工作词缀）：

http://twitter.github.com/bootstrap/javascript.html

Answer 1

现在您需要做的就是定义导航栏贴在后的位置。在stylesheet.css中更改

.bs-docs-sidenav.affix {
top: 40px;
}  

类似

.bs-docs-sidenav.affix {
top: 230px;
}  

希望这有帮助！