Применение перехода SlideUp на .removeClass

Question

Пытается применить переход SlideUp в то время как .removeClass. Этот скрипт показывает/скрывает меню навигации на странице прокрутки вверх/вниз. Я хочу добавить переход, когда меню навигации скрыто. Смотрите эту fiddle>

JS

lastScroll = 0; 
$(window).on('scroll',function() {  
    var scroll = $(window).scrollTop(); 
    if(scroll === 0){ 
     $(".nav").removeClass("darkHeader"); 
    } else if(lastScroll - scroll > 0) { 
     $(".nav").addClass("darkHeader"); 
    } else { 
     $(".nav").removeClass("darkHeader"); 
    } 
    lastScroll = scroll; 
}); 

Я пробовал:

lastScroll = 0; 
    $(window).on('scroll',function() {  
     var scroll = $(window).scrollTop(); 
     if(scroll === 0){ 
      $(".nav").removeClass("darkHeader"); 
     } else if(lastScroll - scroll > 0) { 
      $(".nav").addClass("darkHeader"); 
     } else { 
      $(".nav").removeClass("darkHeader").slideUp("1000"); //I have Added 
     } 
     lastScroll = scroll; 
    }); 

Это не работает. Вопрос: как добавить эффект slideUp во время навигации?
Я пытаюсь сделать Как This>

Answer 1

Да, Вы можете использовать slideUp() & slideDown() функции как ниже:

$(window).on('scroll',function() {  
    var scroll = $(window).scrollTop(); 
    if(scroll === 0){ 
     $(".nav").removeClass("darkHeader"); 
    } else if(lastScroll - scroll > 0) { 
     if(!$(".nav").hasClass('darkHeader')) $(".nav").hide(); 

     $(".nav").slideDown('fast',function(){ 
      $(".nav").addClass("darkHeader"); 
     }); 
    } else { 
     $(".nav.darkHeader").slideUp('slow',function(){ 
      $(".nav").removeClass("darkHeader"); 
     }); 
    } 
    lastScroll = scroll; 
}); 

Смотрите ваш пример работы с 2-мя функциями здесь: jsfiddle