jQuery slideDown not working without slideUP -

i working on animated sticky header. once scroll below point header should slide in top , remain fixed till scroll above point.

here jsfiddle, if remove comment on slideup, works fine.

http://jsfiddle.net/rkr2/dk8ua/1/

html:

<div class="nav-container">     <div class="nav">         <div id="bad"> </div>     </div> </div> <p> long content here </p> 

css:

.f-nav{      z-index: 9999;      position: fixed;      left: 0;      top: 0;      width: 100%; }  #bad{      width: 100%;      height: 50px;      background-color: yellow; } 

js:

var nav=$('.nav-container'); $(window).scroll(function(){     if($(this).scrolltop() > 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');     } }); 

why happening?

jquery slidedown meant work on hidden elements. if element visible you'll not see effect. work around add .hide() on element before .slidedown. this: http://jsfiddle.net/dk8ua/3/

the reason works when adding .slideup, slideup hides element.

update: can add if condition check if nav has class avoid doing animation every time scroll.

var nav = $('.nav-container'); $(window).scroll(function () {     if ($(this).scrolltop() > 200) {         if (!nav.hasclass('f-nav')) {             nav.addclass("f-nav");             nav.hide();             nav.slidedown("slow");             $('#bad').css('background-color', 'red');         }     } else {         nav.removeclass("f-nav");         // nav.slideup("slow");         $('#bad').css('background-color', 'yellow');     } }); 

http://jsfiddle.net/dk8ua/13/