jQuery 애니메이션은 올바르게 한 번 실행 된 후 이상하게 작동합니다.

Question

다음 JavaScript/jQuery 코드가 있습니다. 나는 그것으로 어떤 문제도 볼 수 없지만 그것이 올바르게 작동하지 않습니다.

나는 그것을 정상적으로 작동하고 #forumHeader 최고 애니메이션입니다 아래로 스크롤 처음

$(document).ready(function(){ 
 
    $(window).scroll(function(){ 
 
     if($(window).scrollTop() > 0) { 
 
      $("#forumHeader").animate({top: '250px'}); 
 
     } 
 
     else 
 
     { 
 
      $("#forumHeader").animate({top: '60px'}); 
 
     } 
 
    }); 
 
});

#forumHeader 
 
{ 
 
    position: absolute; 
 
    top: 60px; 
 
    left: 0%; 
 
    height: 100px; 
 
    width: 200px; 
 
    color: white; 
 
    background-color: red; 
 
} 
 

 
#content 
 
{ 
 
    height: 1000px; 
 
    background-color: gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="forumHeader">Forum Header</div> 
 
<div id="content">Some content here</div>

: 250 픽셀. 그러나 다시 위로 스크롤하면 60px까지 애니메이션으로 돌아 가기까지 수 초가 걸릴 수 있습니다. 때로는 앞뒤로 바뀌고 때로는 아무 것도하지 않을 수도 있습니다. 문제가 무엇입니까? ..

Answer 1

내가 추가하고 클래스를 제거하기 위해 jQuery를 사용하여 사용하는 것이, 다음 CSS 전환

$(document).ready(function(){ 

    // EDIT - Move the selector outside of the scroll event as suggested 
    var header = $("#forumHeader"); 

    $(window).scroll(function(){ 

     if($(window).scrollTop() > 0) { 
      header.addClass('slide'); 
     } else { 
      header.removeClass('slide'); 
     } 
    }); 
}); 

#forumHeader{ 
    top: 60px; 
    -webkit-transition: top 500ms ease-out ; 
    -moz-transition: top 500ms ease-out ; 
    -o-transition: top 500ms ease-out ; 
    transition: top 500ms ease-out ; 
} 
#forumHeader.slide{ 
    top: 250px; 
} 
#content 
{ 
height: 1000px; 
background-color: gray; 
} 

을 사용 도와주세요

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="forumHeader">Forum Header</div> 
<div id="content">Some content here</div> 

희망이