gpt4 book ai didi

javascript - 在用户滚动时沿渐变更改背景颜色

转载 作者:可可西里 更新时间:2023-11-01 12:56:44 25 4
gpt4 key购买 nike

我试图让页面的背景颜色在用户滚动时在黑色和白色之间的渐变上发生变化。如果有意义,颜色将取决于用户当前在页面上滚动到的位置?这是我已经拥有的一些代码,但是唯一的问题是当用户没有滚动到任何地方时,网页不是黑色的。

function scroll(){
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
var color = Math.round(((body.scrollTop + html.offsetHeight) / height) * 255);
body.style.backgroundColor = "rgb("+color+","+color+","+color+")";
}
html{
height: 100%;
}
body{
height: 200%;
background: rgb(126,126,126);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<body onscroll="scroll()">
<script src="assets/JS/ScrollEffect.js"></script>
</body>

</html>

最佳答案

是这样的吗?

$(window).on('scroll', function(){
var s = $(window).scrollTop(),
d = $(document).height(),
c = $(window).height();

var scrolledArea = (s / (d - c));
$("div").css("opacity", scrolledArea);
})
body{
margin: 0;
}

div{
height: 500vh;
background: #000;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

</div>

关于javascript - 在用户滚动时沿渐变更改背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50169061/

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