像示例一样，使ScrollSpy引导程序侧边栏的最低代码是什么? [英] What is the minimum code to make ScrollSpy bootstrap sidebar like the example?
问题描述
我已经在引导页面上看到了左侧的ScrollSpy示例:
I have seen the left hand ScrollSpy example on the bootstrap page:
http://twitter.github.io/bootstrap/2.3. 2/javascript.html#scrollspy
但是他们没有如何获得相同样式和效果的示例代码?实现此目标所需的最低代码是多少，因为我看到的所有JsFiddle示例都没有样式.
But they don't have any example code of how to get the same style and effect? What is the minimum code needed to achieve this, as all the JsFiddle examples I have seen do not have the styling.
我已停止在项目上使用scrollspy，因为滚动条仅在页面级别起作用，并且我需要滚动条仅出现在进行滚动的容器上
I have stopped using scrollspy on my projects as the scrollbar only works at the page level, and I need the scrollbar to only appear on the container where the scrolling takes place
推荐答案
看看是否有帮助: http://jsfiddle.net/panchroma/rWYQu/
-
在body标签中添加
<body data-spy="scroll" data-target="#side-nav">
(请参见左手小提琴选项)
In the body tag add
<body data-spy="scroll" data-target="#side-nav">
( see fiddle options left hand column)
使用相同的数据目标ID:<div id="side-nav" >
Wrap your side nav bar in a div with this same data-target ID: <div id="side-nav" >
您可能想将类词缀添加到您的侧面导航中，以使其保留在原位:<ul class="nav nav-pills affix">
You probably want to add the class affix to your side nav so that it stays in place: <ul class="nav nav-pills affix">
为侧面导航中的每个链接添加唯一的ID:例如<li><a href="#one">One</a></li>
Add a unique ID to each of the links in your side nav: eg <li><a href="#one">One</a></li>
在页面的主体中，添加具有与边栏中的链接相匹配的ID的部分:例如<section id="one"> Section 1 </section>
In the main body of the page, add sections with IDs that match the links in your side bar: eg <section id="one"> Section 1 </section>
就是这样！
编辑
如何在他们的网站上使其具有类似Bootstrap示例的样式?
How do I get it to style like the Bootstrap example on their site though?
如果您想要的样式类似于引导页面，则为以下变体
http://jsfiddle.net/panchroma/ExWDq/
Here's a variation if you want stying similar to the bootstrap page
http://jsfiddle.net/panchroma/ExWDq/
您将看到，我已经更改了导航列表ul上的类，以更好地利用一些内置的Bootstap样式，向菜单链接添加了V形符号，并为导航列表添加了样式和媒体查询.
You will see that I've changed the classes on the nav list ul to make better use of some built in Bootstap styling, I've added chevrons to the menu links, and added styling and media queries for the nav list.
这篇关于像示例一样，使ScrollSpy引导程序侧边栏的最低代码是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
