title: Floating JQuery menu issues on slower connection
body: <p>I'm trying to create a floating menu (<code>#quickmenu</code> in left hand sidebar of bottom link) that stops at <code>#weather</code> whilst also re-calculating the <code>bottom = $(\'#weather\').offset().top;</code> every 0.5 seconds...</p>
  
  <p>Page to test: <a href="http://www.festivalarchive.com/event/bristol-int-jazz-festival-2014/" rel="nofollow">Bristol International Jazz &amp; Blues Festival 2014 | Festival Archive</a></p>
  
  <p>The recalculation is key as I use expandable content in the main body and because without recaculating on slower connections it doestn't work. I need only <code>#weather.offset.top</code> to be recalculated every 5 seconds, not the whole script otherwise it refreshes and flickers...</p>
  
  <p>I've <em>tried</em> to do code it myself and it's not working, it's 99% <strong>not</strong> coded correctly but can't figure out what's going wrong? The logic seems to be correct though... <code>if (y &gt;= top &amp;&amp; z &lt;= bottom) { ....</code></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $(document).ready(function () {
  
      top = $('#quickmenu').offset().top;
      var didScroll = false;
  
  $(window).scroll(function() {
      didScroll = true;
  });
  
  setInterval(function() {
  if ( didScroll ) {
  
      didScroll = false;
      bottom = $('#weather').offset().top;
      y = $(this).scrollTop();
      z = y + $('#quickmenu').height();
  
      if (y &gt;= top &amp;&amp; z &lt;= bottom) {
          // if so, add the fixed class
          $('#quickmenu').addClass('fixed');
      } else if(z &gt; bottom) {
          // otherwise remove it
          $('#quickmenu').removeClass('fixed').addClass('absolute');
      } else {
          // otherwise remove it
          $('#quickmenu').removeClass('fixed');
      }
  
      }   
  }, 500);
  
  });
  
  &lt;/script&gt;
  </code></pre>