滚动时动画渐变

当我向下滚动时，如何使用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并不总是一个神奇的子弹，在旧手机上感觉很难受......但一旦你开始工作，它就会变得很酷。 –

滚动时动画渐变

回答

相关问题