Bootstrap 3 - 带有侧边栏的Scrollspy
mcc*_*nnf 11 jquery twitter-bootstrap scrollspy twitter-bootstrap-3
我正在使用Bootstrap 3.我想重新创建与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>
Bas*_*sen 13
毕竟你的问题似乎并不重复.您可以尝试这样的事情:http://bootply.com/82265
当您单击子窗体中的链接时,内容将隐藏在导航栏后面.我把你的内容项包装在一个额外的div中.通过这样做,我可以添加一个填充顶部.填充使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;
})
我发现的问题是一种撤消填充顶部的方法.我无法使用滚动事件,因为在添加填充后,词缀会触发滚动事件.撤消'activate.bs.scrollspy'似乎有效.
在bootply我添加了scrollspy $('body').scrollspy({ target: '#sidebar', offset:80 });你也可以使用<body data-spy="scroll" data-target="#sidebar">.我不确定rolllspy偏移的正确值是什么.70似乎有点工作.
请注意,我也是最后一个内容项的最小高度,否则您无法滚动最后两个项目.
我认为以上将是更多某种概念证明,然后是一个真正的答案.
注意 Bootstrap的文档会有同样的问题.他们通过在默认情况下在主题之间添加额外的空格来修复此问题,请参阅:
将在docs.css中添加额外的空白区域:
h1[id] {
margin-top: -45px;
padding-top: 80px;
}
另见:https://github.com/twbs/bootstrap/issues/10670