Botstrap sidebar flickers on a scroll

Question

My goal is to snap the sidebar, it starts to scroll beautifully, but when it gets closer to the footer, it starts to flicker. What have I done wrong? Bootstrap seems to be undecided and continues to switch .affix-bottom to #sidebar

http://codepen.io/anon/pen/MJMQMr

Js

 var $sidebar = jQuery('#sidebar'); jQuery($sidebar).affix({ offset: { top: $sidebar.offset().top, bottom: function() { return (this.bottom = jQuery('#footer').outerHeight(true)) } } }) 

CSS

 .affix { top: 0; } .affix-bottom { position: absolute; top: auto; bottom: 20px; } 

HTML

 <div class="container"> <div class="header"> <!-- HEADER --> </div> <div class="row"> <div class="content col-md-8"> <!-- CONTENT --> </div> <div class="col-md-4"> <div id="sidebar"> <!-- AFFIXED --> </div> </div> </div> <div id="footer"> <!-- FOOTER --> </div> </div> 

Answer 1

if you need to make the sidebar sticky, why don't you do it: codepen.io

this is your code:

 <div class="col-md-4"> <div id="sidebar"> </div> </div> 

and this is mine

 <div id="sidebar" class="col-md-4"> <div> </div> </div>