Question

这就是我的网页结构。左栏（col-lg-3）中心栏（col-lg-6）右栏（col-lg-3）

虽然我的主要内容位于中心列，但我希望我的左列和右列在某个滚动位置后固定（或粘贴）。

我在互联网上找到的大部分解决方案都是左边的1个粘贴。我认为有一些工作需要完成。

请访问http://www.bootply.com/LiOE57ZlwI。到目前为止，左列正在按照我希望的方式工作。我希望右列的行为与左列相同。

另请访问http://www.bootply.com/101100。我想要完全相同的行为。我不想使用这个代码，因为它在屏幕尺寸较小时都搞砸了。

由于

Answer 1

不使用id，而是使用类：

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

在HTML中，不要使用id并将＆＃34; sidebar＆＃34;在课堂上

<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;
}

Demo here

页面左侧和右侧的Bootstrap附加

1 个答案: