我试图建立一个博客网站,我最初使用的模板上getbootstrap.com的例子。
基本上,我希望右边的侧边栏是固定的,这样当你滚动博客文章时,侧边栏就会保持在原来的位置,就像顶部导航一样。
我已经尝试使用词缀插件,但有问题保持它在同一个地方。
<div class="col-sm-3 col-sm-offset-1 blog-sidebar" data-spy="affix" data-offset-top="100">
这是一个JSFiddle - http://jsfiddle.net/Sambolina/L3a7q/
首先,将侧边栏从专栏中分离出来——在我之前的回答中,我遗漏了这一点:
<div class="col-sm-3 col-sm-offset-1">
<div class="blog-sidebar" data-spy="affix" data-offset-top="130">
<!---content--->
</div>
</div>
当侧边栏获得类词缀时,css从position:relative
更新到position:fixed
,但是一旦侧边栏的位置固定,您不提供任何css。现在您的列没有被固定,您需要显式地定义顶部位置。为了保持宽度的一致性,我们还将为已粘贴和未粘贴状态显式地定义它:
.blog-sidebar{
width: 200px;
}
.blog-sidebar.affix{
top: 40px;
padding-top: 15px; /*or add it into the top value, I'm just weird*/
width: 200px;
}
之后的唯一问题是处理如何处理当它崩溃的列-因为它是固定的,内容将保持即使在列崩溃后。解决这个问题的一个好方法是添加类hidden-xs
(和其他如果你从sm改变列)来隐藏这个内容,然后创建一个新的div,因为你想要它显示在小的视口上,并给它类visible-xs
。你可以为它设置独特的样式,这可能是个好主意,因为在最小的设备上,导航栏+导航栏+内容可能太多了。