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。（免责声明，我是该帖子的作者）。

Bootstrap词缀无法正常工作

1 个答案:

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