Bootstrap 3-带有侧边栏的Scrollspy [英] Bootstrap 3 - Scrollspy with sidebar
问题描述
我正在使用Bootstrap3.我想重新创建与Bootstrap网站上文档中的边栏相同的功能.
下面是我的代码，它也在这里: http://bootply.com/82119
两个问题.
- 当您向下滚动页面浏览每个部分时，侧边栏项目不会突出显示.
- 单击侧边栏项目时，它会跳到相关的锚点，但是一半的内容不可见.更改
data-offset值似乎无效.
我在做什么错了?
<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>
您的问题似乎根本不是重复的. 您可以尝试执行以下操作: http://bootply.com/82265
当您单击子导航中的链接时，内容将隐藏在导航栏后面.我将您的内容项包装在一个额外的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;
})
我发现的问题是撤消padding-top的一种方法.我无法使用滚动事件，因为在添加填充后，词缀触发了滚动事件.取消对"activate.bs.scrollspy"的操作似乎可行.
在bootply中，我通过$('body').scrollspy({ target: '#sidebar', offset:80 });添加scrollspy，也可以使用<body data-spy="scroll" data-target="#sidebar">.我不确定scrollspy偏移量的正确值是多少. 70似乎可以工作.
请注意，我也是最后一个内容项的最小高度，否则您将无法滚动最后两个项目.
我认为以上内容将是对概念的证明，而不是真实的答案.
注意，Bootstrap的文档将有相同的问题.他们已通过在默认情况下在主题之间添加额外的空格来解决此问题，请参阅:
将在docs.css中添加其他空格:
h1[id] {
margin-top: -45px;
padding-top: 80px;
}
另请参见: https://github.com/twbs/bootstrap/issues/10670
I am using Bootstrap 3. I want to recreate the same functionality as the sidebar in the documentation on the Bootstrap site.
Below is my code, and it is also here: 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.
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>
Your question does not seem to be duplicate after all. You could try something like this: 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:
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.
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.
Note i also a min-height to your last content item otherwise you can't scroll the last 2 items.
I think the above will be more some kind of proof of concept then a real answer.
NOTE Bootstrap's documentation will have the same problem. They have fixed this by adding additional white space between the topics by default, see:
Additional white space will be add in docs.css:
h1[id] {
margin-top: -45px;
padding-top: 80px;
}
See also: https://github.com/twbs/bootstrap/issues/10670
这篇关于Bootstrap 3-带有侧边栏的Scrollspy的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
