javascript - Bootstrap 博客修复了侧边栏问题

Question

我正在尝试构建一个博客站点，我最初使用的是 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/

Answer 1

首先，从你的专栏中分离出你的侧边栏 - 在我之前的回答中，我错过了:

<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，因为您希望它显示在小视口(viewport)并给它类 visible-xs。您可以为其设置独特的样式，这可能是个好主意，因为导航栏 + 导航 + 内容在最小的设备上可能太多了。

有关所有这些的示例，请参阅 Bootstrap docs有一个正确的附加导航。(根据以下作者的评论编辑)