2

我正在尝试按照记录的步骤在最新版本的 twitter bootstrap 中使用 affix 组件，但我无法让它工作。这是JsFiddle中的示例

我看到两个问题

  • 单击 sidenav 链接可以正确滚动到适当的内容，但滚动内容不会使适当的 sidenav 链接处于活动状态
  • sidenav 的样式与 bootstrap网站中不同。

如果有人能像在 twitter bootstrap 站点中那样帮助它工作，我将不胜感激。

4

2 回答 2

6

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

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

于 2012-09-17T21:38:35.833 回答
4

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

我将引导文档中的子导航类似于一个小的 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 中描述的错误

于 2013-02-07T17:50:23.350 回答