使用jQuery爲滾動導航欄設置動畫

我可以使用jQuery來爲我的導航欄設置動畫，以便它通過滾動更改顏色嗎？我想要的是當滾動到頂部時rgba（51,51,51,0.3）背景顏色的導航欄，以及從頂部向下滾動600px時的rgba（255,255,255,1）。使用jQuery爲滾動導航欄設置動畫

我知道這是可能的東西，如使這個：

$(window).bind('scroll', function() { 
    if ($(window).scrollTop() > 600) { 
     $('.navbar-container-fixed').addClass('white'); 
    } 
    else if ($(window).scrollTop() < 600) { 
     $('.navbar-container-fixed').removeClass('white'); 
    } 
});

，但將改變顏色沒有動畫。我想要的是漸進式顏色更改，以便隨着頁面的進入，背景顏色會逐漸變爲白色。所以它是這樣的：

0 px from top: rgba(51, 51, 51, 0.3) 

100px from top: rgba(85, 85, 85, 0.4167) 

200px from top: rgba(119, 119, 119, 5.334)

等等。

來源

2015-01-02 user2947684

爲什麼不將背景設置爲一個梯度？或者，也可以使用'.animate（）' – jbutler483

爲什麼要將背景設置爲漸變？我以爲我可以使用.animate（），但是我怎樣才能使它漸變色漸變，而不僅僅是瞬間的變化。 – user2947684

搜索'jquery animate' - 有一個選項可以設置動畫時間。 – jbutler483

如何檢查最大可用滾動高度並根據滾動位置設置顏色？

$(window).bind('scroll', function() { 
 
    var col_var = Math.round((255/$("body")[0].scrollHeight)*$(window).scrollTop()); 
 
    $(".navbar-container-fixed").css({ 
 
     "background-color":"rgb("+col_var+","+col_var+","+col_var+")" 
 
    }); 
 

 
});

.navbar-container-fixed{ 
 
    display:block; 
 
    width:50px; 
 
    height:2000px; 
 
    background:black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="navbar-container-fixed"></div>

來源

2015-01-02 11:21:23 Banana

完美！我修改它以符合我的需求，它像夢一樣工作:) – user2947684

真棒，很高興我可以幫助:) – Banana

使用jQuery爲滾動導航欄設置動畫

回答

相關問題