자바 스크립트 애니메이션 변경

Question

저는이 코드를 사용하여 사용자가 조금 아래로 스크롤 할 때 내비게이션 막대를 고정 된 탐색 막대로 변경합니다. 아래로 슬라이드하는 대신 애니메이션 슬라이드를 위로 어떻게 만들 수 있습니까? 원래 바이올린은 http://jsfiddle.net/CZ87p/132/에서 찾을 수 있습니다.

var nav = $('.nav'); 
var scrolled = false; 

$(window).scroll(function() { 

    if (20 < $(window).scrollTop() && !scrolled) { 
     nav.addClass('visible').animate({ top: '0px' }); 
     scrolled = true; 
    } 

    if (20 > $(window).scrollTop() && scrolled) { 
     nav.removeClass('visible').animate('top', '-30px'); 
     scrolled = false;  
    } 
}); 

Answer 1

당신은 모두 height과 고정 된 기준을 유지하기 위해 top 애니메이션 수 : 이것이 당신이 찾고있는 것을 경우를

if (20 < $(window).scrollTop() && !scrolled) { 
    nav.addClass('visible').animate({ height: '20px', top: '10px' }); 
    scrolled = true; 
} 

if (20 > $(window).scrollTop() && scrolled) { 
    nav.removeClass('visible').css({'height': 0, top: '30px' }); 
    scrolled = false;  
} 

Fiddle

Answer 2

, 어쩌면 당신은 잘못 설명했다 당신이 필요로하는 것.

var nav = $('.nav'); 
var scrolled = false; 

$(window).scroll(function() { 

    if (20 < $(window).scrollTop() && !scrolled) { 
     nav.animate({ top : '0px' }); 
     scrolled = true; 
    } 

    if (20 > $(window).scrollTop() && scrolled) { 
     nav.animate({ top : '-30px' }); 
     scrolled = false;  
    } 
}); 

http://jsfiddle.net/CZ87p/142/