在页面的左侧和右侧都贴有Bootstrap

Question

This is how my page is structured. Left column (col-lg-3) Center Column (col-lg-6) Right column (col-lg-3)

While my main content would be in center column, I want my left column and right column to be fixed (or sticky ) after certain scroll position.

Most of the solutions I found in the internet was with 1 left column to be sticky. I think there's something javascript works needs to be done.

Please visit http://www.bootply.com/LiOE57ZlwI . So far left column is working exactly the way I want it to be..and I want right column to behave same as left column.

Also please visit http://www.bootply.com/101100 . I want the exact same behavior. I don't want to use this code because it's all messed up in low screen size.

Thanks

Answer 1

Instead of using an id, use a class:

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

and in html, don't use id and put "sidebar" in a class

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

and css change to class as well:

@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