Fix a sidebar while scrolling until footer is reached (using Bootstrap classes)
<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>