Question

我试图重现可在此页面上看到的导航框的行为： http://www.nytimes.com/interactive/2013/10/10/garden/philadelphia-design.html?_r=1

我已经能够将该框保持在滚动状态（使用stickOnScroll并使链接突出显示（使用this trick）...但我仍然坚持使用{{3}}当用户向下滚动时，每个部分标题都会展开和折叠。

这样做有效且轻量级的方法是什么？

Answer 1

您可以使用Bootstrap ScrollSpy或Affix组件 - 更容易！

就像设置nav元素一样简单：

<nav class="col-xs-3 bs-docs-sidebar hidden-print">
    <ul class="nav nav-stacked bs-docs-sidenav fixed" id="sidebar">
        <li>
            <a href="#Group1">Content 1</a>
            <ul class="nav nav-stacked" id="sidebar">
                <li><a href="#Group1Sub1">Sub-Group 1</a></li>
                <li><a href="#Group1Sub2">Sub-Group 2</a></li>
            </ul>
        </li>
    </ul>
</nav>

然后将您的内容放入section元素：

    <div class="col-xs-9">
            <section id="Group1" class="group">
                <h3>Group 1</h3>
                <div id="Group1Sub1" class="subgroup">
                    <h4>Group 1 Sub 1</h4>
                </div>
                <div id="Group1Sub2" class="subgroup">
                    <h4>Group 1 Sub 2</h4>
                </div>
            </section>
</div>

然后最终将目标设置为#sidebar很简单：

$('body').scrollspy({
    target: '#sidebar'
});

在此快速模拟示例：http://jsfiddle.net/LRCpp/6/

文档：http://getbootstrap.com/javascript/

jQuery - 滚动时在导航框中展开项目

1 个答案: