当我向下滚动时，如何使用 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(
){});
最佳答案
希望对你有帮助!! ;) 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>关于javascript - 滚动时设置渐变动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29637517/