$ (창)에서 애니메이션의 느린 반응 시간. 스크롤

Question

여기에 example입니다. 아래로 스크롤하면 탐색 막대가 애니메이션으로 표시됩니다. 상단으로 다시 스크롤하면 애니메이션이 다시 생겨납니다. 불행히도, 이것은 매우 느리게 발생합니다. 이것은 스크롤 할 때마다 좌표를 확인하고 계산해야한다는 사실과 관련이 있습니다. 즉

, 나는이 코드를보다 효율적으로 할 수있는 방법을 찾고 있어요 : 여기

$(window).scroll(function(){ 
    var supra = $("div#supra-top-wrap"), 
     topWrap = supra.children("div#top-wrap"), 
     subNav = supra.children("nav#sub-nav"); 

    if ($(window).scrollTop() > 0){ 
     topWrap.animate({"top":"-38px"}, 400); 
     subNav.animate({"top":"-70px"}, 400); 
    } 
    else { 
     topWrap.animate({"top":"0"}, 400, function() { 
      subNav.animate({"top":"0"}, 400); 
     }); 
    } 
}); 

아, 그리고 것은 당신의 방법을 얻을 수있는 Fiddle이다.

Answer 1

저는 애니메이션이 대기중인 간단한 경우이므로 이전 애니메이션이 완료된 후에 만 ​​실행되므로 약 400ms 후에 실행됩니다. 다음과 같이 stop()을 추가하십시오.

topWrap.stop().animate(...) 
subNav.stop().animate(...) 

이것은 실행중인 애니메이션을 중지하고 즉시 새 애니메이션을 시작해야합니다.

Answer 2

다른 시도 - 애니메이션이 더 빨리 반응하지만 여전히 언급 한 .stop() @EvidentAgenda만큼 효과적이지 않습니다. 그러나 나는 .stop 사용하는 것이 유익 (true)가 될 수있다, 우리는이 나를 위해 그것을 고정 이렇게 애니메이션

var tt = {'top': 0}; // Animation string 
$(window).scroll(function(){ 
    var scroll = $(window).scrollTop(); 
    if(scroll > h) { var tt2 = {'top': 0}; } 
    else { var tt2 = {'top': FHh*-1}; } 
    //FHh is global var that is Div's height 
    if(tt2 != tt) { 
    $('#fixedHeader').stop().animate(tt2, 150); 
    // can use together with .stop() - which even more faster 
    tt = tt2; 
    } 
});