Question

我试图通过跟随documented steps在最新版本的twitter bootstrap中使用affix组件，但我无法使其工作。以下是JsFiddle

中的示例

我看到两个问题

单击sidenav链接可正确滚动到适当的内容，但滚动内容无法使适当的sidenav链接处于活动状态
sidenav未设置为bootstrap website中的样式。

如果有人帮助我在twitter bootstrap网站上工作，我将不胜感激。

Answer 1

您正在寻找ScrollSpy。当您滚动或切换到相应的部分时，它会突出显示一个菜单项。

Affix在某种程度上可替代实验性CSS position:sticky。当您从顶部滚动 n px时，它会将菜单position从static更改为fixed。

Answer 2

关于词缀的文档令人困惑，因为它描述了词缀“左侧的子导航是词缀插件的现场演示”。而这种子导航甚至更像是卷轴的一个例子。

我将类似于自举文件的子导航类似于

中的小jsfiddle

http://jsfiddle.net/citykid/Gb2SD/6/

<body>
    <div class="container">
        <div class="row">
            <div class="span2" id="navparent">
                <ul class="nav nav-list navex" data-spy="affix">
                    <li><a href="#o">overview</a>
                    </li>
                    ...
                </ul>
            </div>
            <div class="span9">
                <p>top of the document</p>
                 <h3 id="o" data-offset-top="200">Overview</h3>
                <div style="height:500px">dummy content overview</div>
                ...
            </div>
        </div>
    </div>
    <script src="/js/jquery-1.9.0.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-affix.js"></script>
    <script>
        $(document).ready(function() {
            $(document.body).scrollspy({
                target: "#navparent"
            });
        });
    </script>
</body>

使用JS api，而不是数据属性，否则会遇到jsfiddle.net/citykid/Gb2SD/4中描述的错误

如何在Twitter Bootstrap 2.1.1中使用Affix组件

2 个答案: