title: Jquery fixed div flickering
body: <p>I have the code below:</p>
  
  <pre><code>jQuery(window).scroll(function(){
  var h = jQuery('.container.section1').height();
  var y = jQuery(window).scrollTop();
  var rec_prev = jQuery("#recipe-prev");
  var rec_next = jQuery("#recipe-next");
  var pos_prev = rec_prev.offset().top + rec_prev.height();
  var pos_next = rec_next.position();
  var footer_pos = jQuery("#footer").offset().top;
  var position = footer_pos - 200;
  if( y &gt; (h*.05) &amp;&amp; y &lt; (h*.8) ){
   jQuery("#recipe-prev").fadeIn("slow");
   jQuery("#recipe-next").fadeIn("slow");
  } else {
  foo_prev = footer_pos - pos_prev;
  
  console.log(pos_prev);
  if (foo_prev &lt;= 5){
    rec_prev.css('position', 'absolute');
    rec_prev.css('top',position);
    rec_prev.css('height','195px');
    rec_next.css('position', 'absolute');
    rec_next.css('top',position);
    rec_next.css('height','195px');
   }
   else {
     rec_prev.css('position', 'fixed');
     rec_prev.css('top','auto');
     rec_next.css('position', 'fixed');
     rec_next.css('top','auto');
   }
  }    
  });
  </code></pre>
  
  <p>I want the 'recipe-prev' div to be sticky when he encounters the footer. The problem is that the div is starting flickering after it encounters the footer and I try to scroll. Do you have any idea what can I do? </p>