title: How can I make this fixed nav stop flashing?
body: <p>I have a fixed nav bar that fades out when scrolling down the page and reappears when scrolling up the page which all works fine but I've noticed if I do this very quickly with short movement say 20 times. It doesn't have time to do it and seems to store the count and will then continue to flash for that amount of times. How can I stop this?</p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var previousScroll = 0,
  headerOrgOffset = $('#centre').height();
  
  $('header').height($('#centre').height());
  
  $(window).scroll(function () {
  var currentScroll = $(this).scrollTop();
  if (currentScroll &gt; headerOrgOffset) {
      if (currentScroll &gt; previousScroll) {
          $('header').fadeOut();
      } else {
          $('header').fadeIn();
      }
  } else {
          $('header').fadeIn();
  }
  previousScroll = currentScroll;
  });
  &lt;/script&gt;
  
  &lt;style type="css/text"&gt;
  header {
  width:100%;
  height:86px;
  background:#ffffff;
  top:0;
  left:0;
  right:0;
  position:fixed;
  z-index: 1000;
  display:block;
  border-bottom: solid 1px #eee;
  }
  
  #centre {
  width:960px;
  height:86px;
  margin-left:auto;
  margin-right:auto;
  background:#ffffff;
  }
  &lt;/style&gt;
  
  &lt;header&gt;
      &lt;div id="centre"&gt;Nav&lt;/div&gt;
  &lt;/header&gt;
  </code></pre>