gpt4 book ai didi

javascript - 如何在 Javascript 中使用滚动事件(无 Jquery)

转载 作者:行者123 更新时间:2023-11-28 16:27:47 24 4
gpt4 key购买 nike

所以这是代码。当滚动距顶部 1000 像素时,我只是想更改 h1 标题的颜色。我想为此目的使用纯 javascript。请尝试忽略代码编写的糟糕程度。任何建议都将非常受欢迎。谢谢你的时间。

<html> <head> <title> scroll </title> 
<!-- CSS !-->
<style> .redbox {
background-color: red;
position: absolute;
top: 10px;
height: 90px;
width: 100px;
} .reveal {
position: fixed;
top:450px;
transition: width 2s;
display: block;
} </style>
</head>
<!-- HTML !-->
<body>
<div class='redbox' id='red'> , </div>
<h1 class='reveal' id='demo'> The comes up on 1000 scroll! </h1>
<h1 style='position: absolute;top: 1900px;'> END </h1>
<!-- JS !-->
<script>
var top = window.pageYOffset || document.documentElement.scrollTop
if (top == 1000) {
document.getElementById('demo').style.color = 'red'}
</script> </body> </html>

最佳答案

您可以使用事件处理程序检查当前滚动偏移量:

document.body.addEventListener('scroll', function() {

if(window.scrollY > 499) {
document.getElementById('myDiv').classList.add('appear'); // or whatever...
}

});

关于javascript - 如何在 Javascript 中使用滚动事件(无 Jquery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41659275/

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