我在Bootstrap页面上看到了左侧的ScrollSpy示例:
http://twitter.github.io/bootstrap/2.3.2/javascript.html#scrollspy
但他们没有任何示例代码如何获得相同的风格和效果?实现这一点所需的最小代码是什么,因为我看到的所有JsFiddle示例都没有样式。
更新
我已经停止在我的项目中使用scrollspy,因为滚动条只能在页面级别工作,我需要滚动条才能出现在容器上,滚动发生
解决方法
看看是否有帮助:
http://jsfiddle.net/panchroma/rWYQu/
http://jsfiddle.net/panchroma/rWYQu/
>在body标签中添加< body data-spy =“scroll”data-target =“#side-nav”>
(见小提琴选项左手栏)
>使用相同的数据目标ID将div侧面的导航栏包裹在div中:< div id =“side-nav”>
>你可能希望将类粘贴添加到你的侧面导航栏中,使其保持原样:< ul class =“nav nav-list affix”>
>向您侧面的每个链接添加一个唯一的ID nav:eg< li>< a href =“#one”> One< / a>< / li>
>在页面的主体中,添加ID与您的侧栏中的链接相匹配的部分:例如< section id =“one”>第1节< / section>
而已!
编辑
How do I get it to style like the Bootstrap example on their site though?
如果您想要与引导页面相似,这是一个变体
http://jsfiddle.net/panchroma/ExWDq/
您将看到我已经更改了nav列表中的类,以更好地利用一些内置的Bootstap样式,我已经在菜单链接中添加了V形,并为导航列表添加了样式和媒体查询。