gpt4 book ai didi

javascript - 滚动时设置渐变动画

转载 作者:行者123 更新时间:2023-12-03 10:20:57 25 4
gpt4 key购买 nike

当我向下滚动时,如何使用 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/

最佳答案

希望对你有帮助!! ;) 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com