Затухание навигатора и его фиксация при прокрутке вниз, исчезновение при прокрутке вверх

Question

Я пытаюсь заставить мою навигацию ослабить изменения, которые были выцветшими (цвет ul li и цвет фона). Я хочу, чтобы nav исчез в исходное состояние, но у меня проблемы с угасанием анимации.

Я попытался оживить удаление класса, но это все испортило!

скрипку: http://jsfiddle.net/vp7chr47/1/

HTML

<div id="nav"> 
    <ul> 
     <li>link</li> 
     <li>link</li> 
     <li>link</li> 
    </ul> 
</div> 

JS

$(window).scroll(function() { 
    var scroll_top = $(this).scrollTop(); 
    if (scroll_top >= 1) { 
     $("#nav").addClass("nav-float"); 
    } else { 
     setTimeout(function(){ 
      $("#nav").removeClass("nav-float"); 
     }, 1000).fadeOut("slow"); 
    } 
}); 

CSS

body { 
    background: #000; 
    padding: 0; 
    margin: 0; 
    color: #00ff00; 
} 
#nav { 
    width: 100%; 
    height: 80px; 
    border: 1px solid #ff0000; 
} 
#nav ul li { 
    display: inline; 
} 
.nav-float { 
    position: fixed; 
    background: #fff; 
    transition: all 0.3s ease-in-out 0s; 
    -moz-transition: all 0.3s ease-in-out 0s; 
    -webkit-transition: all 0.3s ease-in-out 0s; 
} 
.nav-float ul li { 
    color: #ff0000; 
    transition: all 0.3s ease-in-out 0s; 
    -moz-transition: all 0.3s ease-in-out 0s; 
    -webkit-transition: all 0.3s ease-in-out 0s; 
} 

Answer 1

Вы можете переместить css transition из классов .nav-float в классы #nav. Тогда вы можете просто просто добавить или удалить класс:

$(window).scroll(function() { 
    var scroll_top = $(this).scrollTop(); 
    if (scroll_top >= 1) { 
     $("#nav").addClass("nav-float"); 
    } else { 
     $("#nav").removeClass("nav-float"); 
    } 
}); 

Working fiddle is here