更改Javascript動畫

我使用此代碼在用戶向下滾動一下時將導航欄更改爲固定導航欄。我如何讓動畫向上滑動而不是向下滑動？原來的小提琴可以在這裏找到http://jsfiddle.net/CZ87p/132/。更改Javascript動畫

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;  
    } 
});

來源

2013-12-19 user3120950

你的意思是滑動的，而不是簡單的隱藏起來？滾動條到達頂部時。 – NeoHQ

你可以動畫都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

來源

2013-12-19 23:00:18 McGarnagle

真棒這就是我需要的，除了導航欄應該在頂部不是20px下來。我試圖將20px更改爲0，並將其搞亂。 – user3120950

您需要在10 修改頂級動畫...頂：「0像素」 ...回到：「20像素」下面是一個工作[小提琴]（http://jsfiddle.net/762z9/13 /）的基礎上原來的答案。 – Bic

如果這是你在找什麼，也許你已經解釋錯了你需要什麼。

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/

來源

2013-12-19 23:14:17 NeoHQ

更改Javascript動畫

回答

相關問題