I'm trying to make a sidebar that will scroll with the page, and when its bottom reaches the page footer, it will stop scrolling and stay in place. Like it is explained here, and like in this fiddle.

The problem is, I'm using some Bootstrap 3, and I believe I can't achieve the same result because of some properties on its CSS. Instead of the sidebar staying at the bottom, it goes back up after it reaches the footer.

This is my layout structure.

<nav class="navbar"></nav>

<div class="container" id="wrapper">
  <div class="row">
     <div class="col-sm-8" id="blog-main"></div>
     <div class="col-sm-4" id="blog-sidebar"></div>
  </div>
</div>

<div id='blog-footer'></div>

Fiddle: /

I tried putting blog-sidebar inside a wrapper div, with position: absolute on it and with position: relative on the main wrapper, but it broke the layout and the scrolling still did not work as I expected. Thanks in advance for the help.

I'm trying to make a sidebar that will scroll with the page, and when its bottom reaches the page footer, it will stop scrolling and stay in place. Like it is explained here, and like in this fiddle.

The problem is, I'm using some Bootstrap 3, and I believe I can't achieve the same result because of some properties on its CSS. Instead of the sidebar staying at the bottom, it goes back up after it reaches the footer.

This is my layout structure.

<nav class="navbar"></nav>

<div class="container" id="wrapper">
  <div class="row">
     <div class="col-sm-8" id="blog-main"></div>
     <div class="col-sm-4" id="blog-sidebar"></div>
  </div>
</div>

<div id='blog-footer'></div>

Fiddle: https://jsfiddle/mpxrqwwf/7/

I tried putting blog-sidebar inside a wrapper div, with position: absolute on it and with position: relative on the main wrapper, but it broke the layout and the scrolling still did not work as I expected. Thanks in advance for the help.

• javascript
• jquery
• html
• css
• twitter-bootstrap

1 Answer 1

Bootstrap has a build in plugin to do that for you, just by adding a couple of data attributes.

Affix affix.js

The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;.

You just have to define an offset-top and an offset-bottom via the attributes on the element you want to be affixed. Based on your offset values the plugin will add and remove a couple of CSS classes when an offset is reached during scrolling. These classes can be styled to your needs.

Positioning via CSS

The affix plugin toggles between three classes, each representing a particular state: .affix, .affix-top, and .affix-bottom. You must provide the styles, with the exception of position: fixed; on .affix, for these classes yourself (independent of this plugin) to handle the actual positions

If you want more flexibility you can call the affix plugin via javaScript.

Here is your fiddle using the affix plugin via data attributes:

CSS

/** CSS relacionado à barra de navegação **/
#my-nav {
  position: fixed;
  width: 100%;
  background-color: black;
  height: 40px !important;
  min-height: 0px;
  z-index: 9999;
  margin-bottom: 0;
}

#wrapper {
  width: 81.6%;
}

#blog-header {
  color: black;
  text-align: right;
  margin-bottom: 20px;
}

#blog-main {
  /*width: 68%;*/
  height: 500px;
  padding: 0;
  margin-right: 5px;
  background-color: orange;
}

#blog-sidebar {
  background-color: purple;
  /*width: 30.9%;*/
  width: 222px;
  height: 300px;
  padding: 25px 0px 20px 0px;
}

.affix {
  position: fixed;
  top: 40px;
}
.affix-top {
  position: static;
}
.affix-bottom {
  position: absolute;
}

#blog-footer {
  background-color: green;
  height: 300px;
}

HTML

<nav class="navbar" id="my-nav"></nav>

<br /><br />

<div class="container" id="wrapper">
  <div id="blog-header">
    <h1>header</h1>
  </div>
  <div class="row">
    <div class="col-sm-8">
      <div id="blog-main"></div>
    </div>
    <div class="col-sm-4">
      <div id="blog-sidebar" data-spy="affix" data-offset-top="80" data-offset-bottom="345"></div>
    </div>
  </div>
</div><!-- /.container -->
<div id='blog-footer'></div>