title: Real-time update absolute positioned div when scrolling
body: <p>Let me explain the situation:</p>
  
  <p>There is a <strong>relative</strong> positioned <code>sidebar</code>. After scrolling past the top of the <code>main-content</code> this sidebar changes to <strong>absolute</strong> and is then real-time updated to the top position in the window (scrollTop of the window).</p>
  
  <p>The problem is that it is really slow and choppy (in Firefox) because it is updating the whole time. How can I update the position 'real-time' without so much load?</p>
  
  <p>Currently it looks like this:</p>
  
  <pre><code>var headerOffset = $('#main-content').offset().top;
  $(document).on('scroll', function() {
    if( ($(document).scrollTop() + 15) &gt; $('#main-content').offset().top ){
      $('#sidebar').addClass('fixed');
      $('#sidebar').css('top', ( $(document).scrollTop() - headerOffset) + 15 );
    } else {
      $('#sidebar').removeClass('fixed');
    }
  });
  </code></pre>
  
  <p>Thanks in advance :)</p>