title: jQuery scroll calculations inaccurate at high-speed scrolling
body: <p>I've run into something very odd. The likelihood that it's an error in my code is high, but I can't figure out why it's happening.</p>
  
  <p>First, here's an example page:
  <a href="http://designintellection.com/quotes/2011/jan/13/design-thinking-visual/" rel="nofollow">http://designintellection.com/quotes/2011/jan/13/design-thinking-visual/</a></p>
  
  <p>If you notice the two nav tabs on the right of the page, when you scroll down they shrink in size and then become position:fixed as you scroll down the rest of the page. As you scroll back up they grow to their original size and go back to non-fixed positioning. (If you're wondering why I'm shrinking them I'm eventually going to replace the text with an icon.)</p>
  
  <p>I've posted the code (JS &amp; CSS) to accomplish this effect below. I know it can be written better, but the main thing I'm trying to discern is if Javascript is able to capture every specific scroll position. I say that because if you scroll slowly then the tabs behave as they're supposed to, you can go up and down as much as you like. However if you scroll at a normal to fast speed then the size, margins and positioning fall apart and you get very strange behavior.</p>
  
  <p>On some level I feel like I'm taking crazy pills, usually I would try to look for bugs, etc. but it seems so strange to me that it works when you scroll slowly and doesn't when you scroll fast.</p>
  
  <p>jQuery:</p>
  
  <pre><code>    $(function() {
      $(window).scroll(function() {
          var scroll = $(window).scrollTop();
  
          if (scroll &gt; 80) {
              $("#the-portfolio-link").css({"width":"2px", "margin-top":"0"});
              $("#the-portfolio-link").addClass("page-link-portfolio-stay");
              $("#the-services-link").css({"margin-top":"108px"});
          }
  
          if ((scroll &gt;= 22) &amp;&amp; (scroll &lt; 80)) {
              $("#the-portfolio-link").css({"width":"60px", "margin-top":"65px"});
              $("#the-portfolio-link").removeClass("page-link-portfolio-stay");
  
              var new_width = 60 + (22 - scroll);
              var existing_margin = 65;
              var new_margin_services = 65 - (60 - new_width);
  
              if (existing_margin &lt; 65) {
                  var new_margin = 65 - (67 - new_width);
                  var margin_top = new_margin;
              }
              else {
                  var margin_top = 65;
              }
  
              $("#the-portfolio-link").css({"width":new_width+"px", "margin-top":margin_top+"px"});
              $("#the-services-link").css({"margin-top":new_margin_services+"px"});
          }
  
          if ((scroll &gt; 80) &amp;&amp; (scroll &lt;= 138)) {
              $("#the-services-link").css({"width":"60px", "margin-top":"108px"});
              $("#the-services-link").removeClass("page-link-services-stay");
  
              var new_services_width = 60 + (80 - scroll);
              var existing_services_margin = $("#the-services-link").css("margin-top").replace("px","");
  
              var margin_services_top = 108 + (60 - new_services_width);
  
              $("#the-services-link").css({"width":new_services_width+"px", "margin-top":margin_services_top+"px"});
          }
  
          if (scroll &gt; 138) {
              $("#the-services-link").css({"width":"2px", "margin-top":"0"});
              $("#the-services-link").addClass("page-link-services-stay");
          }
      });
  });
  </code></pre>
  
  <p>CSS (relevant code only):</p>
  
  <pre><code>.main-nav { position:absolute; left:1102px; top:55px; }
  .main-nav-link { display:block; width:60px; height:22px; margin:65px 0 0 36px; }
  
  .page-link-portfolio-stay { width:2px; margin-top:0; position:fixed; left:1102px; top:40px; overflow:hidden; }
  .page-link-services-stay { width:2px; margin-top:0; position:fixed; left:1102px; top:83px; overflow:hidden; }
  </code></pre>
  
  <p>Any ideas, etc. are much appreciated.</p>
  
  <p>Thanks!
  -David</p>