title: jQuery slideDown not working without slideUP
body: <p>I am working on an animated Sticky Header. Once you scroll below a certain point a header should slide in from the top and remain fixed till you scroll back above the point.</p>
  
  <p>Here is the jsfiddle, if you remove the comment on slideUP, it works fine.</p>
  
  <p><a href="http://jsfiddle.net/rkr2/Dk8UA/1/" rel="nofollow">http://jsfiddle.net/rkr2/Dk8UA/1/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="nav-container"&gt;
      &lt;div class="nav"&gt;
          &lt;div id="bad"&gt; &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;p&gt; long content here &lt;/p&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.f-nav{
       z-index: 9999;
       position: fixed;
       left: 0;
       top: 0;
       width: 100%;
  }
  
  #bad{
       width: 100%;
       height: 50px;
       background-color: yellow;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var nav=$('.nav-container');
  $(window).scroll(function(){
      if($(this).scrollTop() &gt; 200) {
          nav.addClass('f-nav');
          nav.slideDown('slow');
          $('#bad').css('background-color','red');
      } else {
          nav.removeClass('f-nav');
          //nav.slideUp('slow');
          $('#bad').css('background-color','yellow');
      }
  });
  </code></pre>
  
  <p>Why is this happening?</p>