title: Fix a sidebar while scrolling until footer is reached (using Bootstrap classes)
body: <p>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 <a href="http://www.waypointarts.com/blog/2013/06/29/fixing-a-side-bar-while-scrolling-until-bottom" rel="nofollow">here</a>, and like in this <a href="http://jsfiddle.net/Kkv7X/" rel="nofollow">fiddle</a>.</p>
  
  <p>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.</p>
  
  <p>This is my layout structure.</p>
  
  <pre><code>&lt;nav class="navbar"&gt;&lt;/nav&gt;
  
  &lt;div class="container" id="wrapper"&gt;
    &lt;div class="row"&gt;
       &lt;div class="col-sm-8" id="blog-main"&gt;&lt;/div&gt;
       &lt;div class="col-sm-4" id="blog-sidebar"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id='blog-footer'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Fiddle: <a href="https://jsfiddle.net/mpxrqwwf/7/" rel="nofollow">https://jsfiddle.net/mpxrqwwf/7/</a></p>
  
  <p>I tried putting <code>blog-sidebar</code> inside a wrapper div, with <code>position: absolute</code> on it and with <code>position: relative</code> 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.</p>