부정적인 픽셀 값을 사용하지 않고도 애니메이션 div를 들락날락하게 만드는 방법이 있습니까?

Question

내비게이션 막대를 특정 앵커 포인트에서 쉽게 들락날락하게하고 싶습니다. 나는 애니메이션을 수행하는 동안 음수 픽셀 값과 문서의 상단으로 인해 애니메이션이 중단되는 동안 스크롤하는 것을 발견했지만 작업을 완료했습니다. 네비게이션에 숨겨진 픽셀 값을 사용하지 않고 설정 한 애니메이션을 숨기고 표시하는 방법이 있습니까?

나는 visibility : hidden으로 .show() /. hide() 옵션을 시도했지만, .animate()와 통합하는 방법을 알 수없는 것 같습니다.

var t = $("#about").offset().top; 
 

 
$(window).scroll(function(){ 
 
    if($(document).scrollTop() >= t) { 
 
     $('#global-nav').stop().animate({top: '0px'}, 500, 'easeOutBounce'); 
 
    } else { 
 
     $('#global-nav').stop().animate({top: '-50px'}, 500, 'easeInExpo'); 
 
    } \t \t 
 
});

html { height: 2000px; } 
 

 
#global-nav { 
 
    height:50px; 
 
    background:#000; 
 
    z-index: 9999; 
 
    position: fixed; 
 
    left: 0; 
 
    top: -50px; 
 
    width: 100%; 
 
    color:#fff; 
 
    text-align:center; 
 
    
 
} 
 
#global-nav p { 
 
    margin-top:15px; 
 
} 
 
#about{ 
 
    margin-top:600px; 
 
}

<div id="global-nav"><p>Navigation</p>.</div> 
 

 
<div id="about"></div>

이것은 내가 지금까지 성취 한 것입니다 : http://jsfiddle.net/Hysteresis/0oazqj4y/43/

어떤 도움이 많이 이해할 수있을 것이다.

Answer 1

실제로 애니메이션은 효과를 사용하며 주저하고있는 것처럼 보입니다. 그러나 항목을 숨길 때 easing 효과를 제거하면 더 어둡게 보일 것입니다. 예를 들면 :

// Without "easeInExpo" easing effect 
else { 
    $('#global-nav').stop() 
    .animate({top: '-50px'}, 500); 
} 

This looks smooth.