jQuery Bootstrap 3 - 带有侧边栏的 Scrollspy
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18914080/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 - Scrollspy with sidebar
提问by mccannf
I am using Bootstrap 3. I want to recreate the same functionality as the sidebar in the documentation on the Bootstrap site.
我正在使用 Bootstrap 3。我想重新创建与Bootstrap 站点文档中的侧边栏相同的功能。
Below is my code, and it is also here: http://bootply.com/82119
下面是我的代码，它也在这里：http: //bootply.com/82119
Two problems.
两个问题。
- The sidebar items do not highlight as you scroll down the page past each section.
- When you click on a sidebar item, it jumps to the relevant anchor, but half the content is not visible. Changing the
data-offsetvalue appears to have no effect.
- 当您向下滚动页面经过每个部分时，侧边栏项目不会突出显示。
- 当您单击侧边栏项目时，它会跳转到相关的锚点，但一半的内容不可见。更改该
data-offset值似乎没有任何效果。
What am I doing wrong?
我究竟做错了什么？
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="list-group navbar" id="sidebar">
<ul class="nav" id="mynav">
<li><a href="#c1" class="list-group-item">
Content 1
</a>
</li>
<li> <a href="#c2" class="list-group-item" contenteditable="false">Content 2
</a>
</li>
<li> <a href="#c3" class="list-group-item" contenteditable="false">Content 3
</a>
</li>
<li> <a href="#c4" class="list-group-item" contenteditable="false">Content 4
</a>
</li>
<li> <a href="#c5" class="list-group-item" contenteditable="false">Content 5
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-9" id="mycontent" data-spy="scroll" data-target="#sidebar" data-offset="0">
<h2 id="c1" class="">Content 1</h2>
At Bootply we attempt to build simple Bootstrap templates that utilize...
<hr class="col-md-12">
<h2 id="c2" class="">Content 2</h2>
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto...
<hr class="col-md-12">
<h2 id="c3" class="">Content 3</h2>
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto...
<hr class="col-md-12">
<h2 id="c4" class="">Content 4</h2>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
<h2 id="c5" class="">Content 5</h2>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
</div>
</div>
</div>
回答by Bass Jobsen
Your question does not seem to be duplicate after all. You could try something like this: http://bootply.com/82265
毕竟，您的问题似乎并不重复。你可以尝试这样的事情：http: //bootply.com/82265
When you click a link in your subnav the content will be hide behind the navbar. I wrapped your content items in a extra div. By doing this, I could add a padding-top to it. The padding makes the h2 visible:
当您单击子导航中的链接时，内容将隐藏在导航栏后面。我将您的内容项目包装在一个额外的 div 中。通过这样做，我可以为它添加一个 padding-top。填充使 h2 可见：
var clicked = false;
$('#mynav li a').click(
function(){
$('#mycontent > div > h2').css('padding-top',0);
$($( this ).attr('href') + ' > h2').css('padding-top','50px');
clicked = true;
}
);
$('body').on('activate.bs.scrollspy', function () {
if(!clicked)$('#mycontent > div > h2').css('padding-top',0);
clicked = false;
})
Problem i found was a way to undo the padding-top. I couldn't use a scroll event cause the affix triggers a scroll event after the padding has been add. Undo on 'activate.bs.scrollspy' seems to work.
我发现的问题是一种撤消 padding-top 的方法。我无法使用滚动事件，因为在添加填充后词缀会触发滚动事件。撤消“activate.bs.scrollspy”似乎有效。
In the bootply i add the scrollspy by $('body').scrollspy({ target: '#sidebar', offset:80 });you could use <body data-spy="scroll" data-target="#sidebar">also. i'm not sure what will be the right value for the scrollspy offset. 70 seems some kind to work.
在 bootply 中，我添加了$('body').scrollspy({ target: '#sidebar', offset:80 });你也可以使用的 scrollspy <body data-spy="scroll" data-target="#sidebar">。我不确定 scrollspy 偏移量的正确值是多少。70 似乎有点工作。
Note i also a min-height to your last content item otherwise you can't scroll the last 2 items.
请注意，我还有最后一个内容项目的最小高度，否则您无法滚动最后 2 个项目。
I think the above will be more some kind of proof of concept then a real answer.
我认为以上内容更像是某种概念证明，而不是真正的答案。
NOTEBootstrap's documentation will have the same problem. They have fixed this by adding additional white space between the topics by default, see:
注意Bootstrap 的文档也会有同样的问题。他们通过默认在主题之间添加额外的空白来解决这个问题，请参阅：
Additional white space will be add in docs.css:
额外的空白将添加到 docs.css 中：
h1[id] {
margin-top: -45px;
padding-top: 80px;
}
回答by user2865538
I came across this same problem and ended up resolving it by catching the click on the navigation link, preventing the browser from handling the click, and manually scrolling to the target element at a position adjusted for the page layout. Here's the code:
我遇到了同样的问题，最终通过捕获导航链接上的点击来解决它，阻止浏览器处理点击，并在为页面布局调整的位置手动滚动到目标元素。这是代码：
// figure out a nice offset from the top of the page
var scrollTopOffset = $('#main-nav-banner').outerHeight() + 50;
// catch clicks on sidebar navigation links and handle them
$('.bs-sidebar li a').on('click', function(evt){
// stop the default browser behaviour for the click
// on the sidebar navigation link
evt.preventDefault();
// get a handle on the target element of the clicked link
var $target = $($(this).attr('href'));
// manually scroll the window vertically to the correct
// offset to nicely display the target element at the top
$(window).scrollTop($target.offset().top-(scrollTopOffset));
});
The scrollTopOffset variable determines how close to the top the item is scrolled - you'll probably need to tweak the calculation of the value depending on your page layout. In the above example, I used the height of the main navigation banner across the top of the page, and added 50 pixels because that "looked good".
scrollTopOffset 变量确定项目滚动到顶部的距离 - 您可能需要根据页面布局调整值的计算。在上面的示例中，我使用了页面顶部的主导航横幅的高度，并添加了 50 像素，因为“看起来不错”。
Apart from adding the extra snippet above, there's no need to modify your HTML or change the way you're initialising the scrollspy feature.
除了添加上面的额外代码段外，无需修改 HTML 或更改您初始化 scrollspy 功能的方式。
For me it works pretty neatly under Bootstrap v3.0.0 - I hope this is of use to others as well!
对我来说，它在 Bootstrap v3.0.0 下工作得非常好 - 我希望这对其他人也有用！
