jQuery : 내비게이션 막대 아래로 슬라이드 - 애니메이션 부드러움을 향상시키는 방법?

Question

사용자가 메인 헤더를지나 스크롤했을 때만 표시되는 아주 간단한 슬라이드 다운 탐색 바를 만들었습니다. http://hammr.co/9525666/23/index.html

그러나 애니메이션은 거칠고 전혀 매끄럽지 않습니다. 스크롤하는 동안 항상 전화가 걸렸기 때문에 의심 스럽지만 한 번만 호출하는 방법을 모르겠습니다.

내 코드는 다음과 같습니다

function setOffset() { 
    bannerH = $('header').height(); 
} 

function navTop() { 
    if($(window).scrollTop() > bannerH) { 
     $('#navbar').stop().animate({ 
      top: 0 
     }, 100); 
    } else { 
     $('#navbar').stop().animate({ 
      top: -61 
     }, 100); 
    } 
} 

setOffset(); 

$(window).scroll(function(){ 
    navTop(); 
}); 

나는 .stop() 애니메이션에 큰 지연이의 제거하면 (나는 대기를 끝까지 스크롤의 지점에 줄을 "애니메이션"충분한 시간을 가정 또는 그렇게 보입니다).

어쨌든 내 질문은 간단합니다. 애니메이션을 부드럽게 조정하려면 어떻게해야합니까?

Answer 1

당신은 캐시 요소를 사용하고 약간의 바운스에 의해 시도 할 수 :

(function() { //closure to avoid any global variables 
    var timeoutScroll, 
     $navbar = $('#navbar'), 
     $window = $(window); 

    function setOffset() { 
     bannerH = $('header').height(); 
    } 

    function navTop() { 
     if ($window.scrollTop() > bannerH) { 
      $navbar.stop().animate({ 
       top: 0 
      }, 100); 
     } else { 
      $navbar.stop().animate({ 
       top: -61 
      }, 100); 
     } 
    } 

    setOffset(); 

    $window.scroll(function() { 
     clearTimeout(timeoutScroll); 
     timeoutScroll = setTimeout(navTop, 35); 
    }); 
})(); 

Answer 2

물론 대신 떨어 뜨리거나 모든 스크롤 이벤트를 숨기기 위해 헤더를 받고, 당신은 창 상단과 막대의 상태의 위치를 ​​확인하고, 필요한 경우에만이를 변경해야합니다 :

function navTop() { 

    var navTopShowing = $('#navbar').css('top') == 0; 
    var windowTop = $(window).scrollTop(); 

    // If the top of the window is past the banner, and the banner is not showing, show it 
    if ((windowTop > bannerH) && (!navTopShowing)) 
    { 
     $('#navbar').stop().animate({ 
      top: 0 
     }, 100); 
    } 

    // Hide it if it is showing 
    if ((windowTop <= bannerH) && (navTopShowing)) 
    { 
     $('#navbar').stop().animate({ 
      top: -61 
     }, 100); 
    } 
} 

테스트를 거치지 않았지만 희망 사항으로 아이디어를 제공합니다.

Answer 3

나는 또한 그것이 매우 매끄럽다라고 생각한다. (적어도 내 컴퓨터에서)

CSS3 애니메이션은 더 빨라야합니다. (하지만 실제로 얼마나주의를 기울이겠습니까?) CSS with jQuery callbacks과 같은 것을 시도해 볼 수 있습니다.

또는 jquery.animate-enhanced plugin.