滾動時動畫漸變

當我向下滾動時，如何使用jquery將透明菜單變爲黑色動畫？我正在嘗試使用滾動功能，但我不知道如何爲漸變設置動畫效果。滾動時動畫漸變

HTML：

<body> 
    <div id="menu"> 
    </div> 
    <div id="text"> 
    </div> 
</body>

CSS：

#menu { 
    width: 1200px; 
    height: 90px; 
    background-color: rgba(0, 0, 0, 0.3); 
    position: fixed; 
} 

#text { 
    width: 1000px; 
    height: 1000px; 
    background-color: #31fa87; 
}

的Jquery：

$(window).scroll(function(
){});

https://jsfiddle.net/5gudwLs6/3/

來源

2015-04-14 planktone

希望它可以幫助！ ;）Jquery解決方案，用scrolltop檢查body元素大小的相對位置！

$(window).scroll(function() { 
 

 
    $("#menu").css("opacity", $("body").scrollTop()/$("body").height()); 
 

 
});

#menu { 
 
    opacity: 0.0; 
 
    width: 1200px; 
 
    height: 90px; 
 
    background-color: rgba(0, 0, 0, 0.3); 
 
    position: fixed; 
 
} 
 
#text { 
 
    width: 1000px; 
 
    height: 1000px; 
 
    background-color: #31fa87; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div id="menu"> 
 
    </div> 
 
    <div id="text"> 
 
    </div> 
 
</body>

來源

2015-04-14 21:56:29

只是一張紙條，JavaScript並沒有在某些手機上執行（閱讀：iPhone手機），而滾動。一旦滾動停止，JavaScript繼續。 –

呵呵!!對此不知道。從來沒有關於滾動的動畫！謝謝你的提示！！ + 然後可能...... CSS動態計算** calc（）; ** ?? [doc for calc]（http://coboldinosaur.com/pages/css-calc-function.html） –

您不能像'scrollTop'那樣使用'calc（）'。唯一的解決方案是使用像iScroll這樣的JavaScript滾動器來執行自己的計算，並且快速更新CSS來模擬*滾動。只是公正的警告，iScroll並不總是一個神奇的子彈，在舊手機上感覺很難受......但一旦你開始工作，它就會變得很酷。 –

滾動時動畫漸變

回答

相關問題