网页滚动变换DIV的背景色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页滚动变换DIV的背景色</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 2000px; /* 为了看到滚动效果 */
}
.change-bg {
width: 100%;
height: 500px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div></div>
<script>
window.addEventListener('scroll', function() {
if(window.scrollY >= 100) {
document.querySelector('.change-bg').style.backgroundColor = 'blue';
} else {
document.querySelector('.change-bg').style.backgroundColor = '#f0f0f0';
}
});
</script>
</body>
</html>Statement: If the content on this site infringes upon the legitimate rights and interests of the original author, please contact this site to delete it.
