Velocity.js 애니메이션 콜백

Question

중지는이 코드가 있습니다

$(window).scroll(function() { 
    if ($(this).scrollTop() > ($animate.headline.height() + 100)) { 
     $animate.header.velocity({height: "50px"}, { queue: false }); 
    } else { 
     $animate.header.velocity({height: "100px"}, { queue: false }); 
    } 
}); 

위에서 사용자가 스크롤 xxx는 픽셀이 다음 애니메이션을 시작해야하는 경우를, 그것은 잘 작동합니다.

나는 방금 알아 챘을 것이고, 스크롤 할 때마다 속도 애니메이션이 scrollTop을 확인하므로 애니메이션이 시작되기 전에 스크롤이 스크롤되기 때문에 전체 애니메이션이 부드럽게 움직이지 않습니다.

부드럽게하는 다른 방법이 있습니까?

예 :

http://codepen.io/anon/pen/bIkqF

Answer 1

당신이해야 스로틀 벤 독일어의 같은 몇 가지 라이브러리 수표 : https://raw.githubusercontent.com/cowboy/jquery-throttle-debounce/v1.1/jquery.ba-throttle-debounce.min.js.

이 설명서 페이지를 확인하십시오 : http://benalman.com/projects/jquery-throttle-debounce-plugin/. 귀하의 예를 들어

, 당신은 다음과 같이 사용할 수 있습니다 :

$(window).scroll($.throttle(250, checkTop)); 

function checkTop() { 
    if ($(this).scrollTop() > ($animate.headline.height() + 100)) { 
     $animate.header.velocity({height: "50px"}, { queue: false }); 
    } else { 
     $animate.header.velocity({height: "100px"}, { queue: false }); 
    } 
} 

Answer 2

당신이 대신 CSS 방식을 선호하십니까?

var header = $('.header'); 
    $(window).on('scroll', function() { 
     if ($(this).scrollTop() > (header.height() + 20)) { 
      header.addClass('shrink'); 
     } else { 
      header.removeClass('shrink'); 
     } 
    }); 

어설프게과 : 클래스를 전환 JS

.shrink{ 
    height:50px; 
} 

그리고 당신에 :

-webkit-transition: all 0.5s; 
position:fixed; 
top:0; 
left:0; 

가 원하는 높이에 대한 새 클래스를 추가 :

는 귀하의 헤더의 CSS를 설정 더 부드러운 효과를위한 전환의 초 속성

이렇게하면 GPU가 무거워지며 클래스 토글 성능에 미치는 영향은 무시할 수 있습니다. Demo