在页面的左侧和右侧粘贴引导。

Question

这就是我的页面的结构。左柱(col lg-3)中心柱( column 6)右列( Column 3)

虽然我的主要内容将在中心列，我希望我的左列和右列固定(或粘性)后，一定的滚动位置。

我在互联网上找到的大多数解决方案都有1条左边的“粘性”栏。我认为有一些javascript的工作需要做。

请访问http://www.bootply.com/LiOE57ZlwI。到目前为止，左列的工作方式与我想要的be..and完全一样，我希望右列的行为与左列的行为相同。

也请访问http://www.bootply.com/101100。我想要完全一样的行为。我不想使用这段代码，因为它都是在低屏幕大小的混乱。

谢谢

Answer 1

不要使用id，而是使用一个类：

/* activate sidebar */
$('.sidebar').affix({
  offset: {
    top: 235
  }
});

在html中，不要使用id并将“侧栏”放在类中。

<div class="col-md-3" id="leftCol">
    <ul class="nav nav-stacked sidebar">
      <li><a href="#sec0">Section 0</a></li>
      <li><a href="#sec1">Section 1</a></li>
      <li><a href="#sec2">Section 2</a></li>
      <li><a href="#sec3">Section 3</a></li>
      <li><a href="#sec4">Section 4</a></li>
    </ul>
</div><!--/left-->
<div class="col-md-3" id="leftCol">
    <ul class="nav nav-stacked sidebar">
      <li><a href="#sec0">Section 0</a></li>
      <li><a href="#sec1">Section 1</a></li>
      <li><a href="#sec2">Section 2</a></li>
      <li><a href="#sec3">Section 3</a></li>
      <li><a href="#sec4">Section 4</a></li>
    </ul>
</div><!--/right-->

css也更改为类：

@media (min-width: 979px) {
  .sidebar.affix-top {
    position: static;
    margin-top:30px;
    width:228px;
  }

  .sidebar.affix {
    position: fixed;
    top:70px;
    width:228px;
  }
}

.sidebar li.active {
  border:0 #eee solid;
  border-right-width:5px;
}

这里的演示