탐색을 페이드 아웃하고 스크롤을 아래로 고정하면 스크롤이 위로 이동합니다.

Question

페이드 인 된 변경 사항을 페이드 아웃하기 위해 탐색을 시도하고 있습니다 (ul li 색상 및 배경색). 탐색을 원래 상태로 되돌리려면 애니메이션을 페이드 아웃하는 데 문제가 있습니다.

나는 클래스의 제거를 애니메이션으로 시도했지만 모든 것을 엉망으로 만듭니다!

바이올린 : 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

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