title: jQuery fixed header slide down on scroll issue
body: <p>I'm newbe in jQuery, please do not judge strictly. I want header become fixed when I scroll page 300px. And remove fixed if &lt;300px. And I want to animate it, slide down when I scroll down, and slide up when I scroll top. Something like this <a href="http://neighborhood.swiftideas.net/" rel="nofollow">Some site, scroll down and you'll see what I want.</a></p>
  
  <p>My html like that</p>
  
  <pre><code>&lt;div class="heading-wrapper"&gt;
  &lt;a href="#"&gt;1 &lt;/a&gt;
  &lt;a href="#"&gt; 2&lt;/a&gt;
  &lt;a href="#"&gt; 3&lt;/a&gt;
  &lt;a href="#"&gt;4&lt;/a&gt;
  &lt;a href="#"&gt;5&lt;/a&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>Css</p>
  
  <pre><code>.heading-wrapper {
  width: 100%;
  height: 65px;
  background: #000;
  position: relative;
  }
  
  .heading-wrapper.fixed {
  position: fixed;
  top: -80px;
  left: 0;
  right: 0;
  }
  </code></pre>
  
  <p>and jQuery</p>
  
  <pre><code>$(window).scroll(function() {
  if ($(this).scrollTop() &gt; 300){  
  $('.heading-wrapper').addClass("fixed");
  $('.heading-wrapper.fixed').animate({'top' : '0px'}, 800);
    }
    else{
  $('.heading-wrapper.fixed').animate({'top' : '-80px'}, 800);
  setTimeout(function(){
      $('.heading-wrapper').removeClass("fixed");
      },800); 
    }
  });
  </code></pre>
  
  <p>It dont work like what I want. </p>
  
  <ol>
  <li>If scrolling by pressing down mouse whell - it dont animate..</li>
  <li>Animation appears at once only..</li>
  <li>Slide up animation never appears..</li>
  <li>If I scrolling fast up and down, the whole structure breaks down, no styles are added where necessary))</li>
  </ol>
  
  <p>Please, help me to fix this, and remember, do not judge strictly! :)</p>
  
  <p><a href="http://jsfiddle.net/kf5a7/" rel="nofollow">JsFiddle link</a></p>