jQuery: slide header when user scrolls past a point
<p>I have the following jQuery code:</p>

<pre><code>if($(window).scrollTop()&gt;=220) {
                    $('#header nav').slideUp('fast').removeClass('fixed');
                } else {
                    $('#header nav').addClass('fixed').slideDown('fast');
                }
</code></pre>

<p>What happens is that when a user scrolls further than 220 pixels down the page the header will get class of fixed and then slide down. When the user moves back up again then the header will slide up and have its class of fixed removed. The user will never see the header move back into its original position as its done around 180 pixels so is off screen.</p>

<p>The problem however is that it will do the slide over and over again when ever the user scrolls which isn't quite what I want. I've looked at the stop method but stopping the current animation is also not what I need.. Any ideas on how to fix this?</p>

<p>The code above is a function called like so:</p>

<pre><code>$(window).scroll(function() {
                    fixedHeader();
                });
</code></pre>
