javascript - Bootstrap 附加功能无法正常工作

Question

我使用 Bootstrap doc's CSS and JavaScript 构建了文档.下面是我文档中侧边栏的代码:

<div class="col-md-3 docs">
    <div class="bs-docs-sidebar">
        <ul class="nav docs-sidebar-nav">
            <li class="active">
                <a href="#one">One</a>
            </li>
            <li>
                <a href="#two">Two</a>
            </li>
        </ul>
    </div>
</div>

下面是.affix的jquery代码:

$(document).ready(function () {            
    $('.bs-docs-sidebar').affix({ offset: { top: 290 } })
})

当我打开我的页面时，它不显示带有条目一、二的边栏。当我滚动页面时，边栏显示“二”处于事件状态但从不显示条目“一”。

我正在使用 Bootstrap v3.2.0。为什么边栏不能与 .affix 一起正常工作。我什至尝试使用 data-spy=affix 但它没有用。

如何使用词缀使侧边栏正常工作？

Answer 1

添加affix ，你只需要做这样的事情:

$(".bs-docs-sidebar").affix({ offset: { top: 60 } });

这将根据滚动位置动态地将以下类之一添加到您的元素:

• .affix-top
• .affix
• .affix-bottom

然后在 .affix 类就位时设置一些样式(bootstrap 会自动添加 position:fixed 所以我们只需要设置高度:

.bs-docs-sidebar.affix {
    top: 20px;
}

Here's a working demo in jsFiddle that uses Affix on the BS sidebar

但听起来您实际上遇到了 scrollspy 问题以及 Bootstrap 设置 .active 项样式的方式。这是一个 blog post that goes through all the steps of setting up a side nav bar like the one that twitter bootstrap uses . (免责声明，我是该帖子的作者)。