I want the <body> element's background-color to change every 500px as I scroll down.
I've scoured the web for answers, but still can't figure out what's going wrong. Please review the code. However, Firefox Browser indicates that an element is causing overflow in the body tag
https://i.stack.imgur.com/IbbZk.png
I attempted using overflow: hidden with CSS on both the body and html tags, but it just made the scroll bar disappear.
I'm a beginner at coding. It should be correct since it's from a learning module by my teacher. Thank you for your assistance. UPDATE: My mistake was in transcribing the code.
All the responses provided solutions to resolve this problem. Thanks to everyone who helped.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CHALLENGES</title>
<style>
body {
height: 3000px;
};
.one {
background-color: beige;
transition: all 3s;
};
.two {
background-color: blueviolet;
transition: all 3s;
};
.three {
background-color: coral;
transition: all 3s;
};
.four {
background-color: cornflowerblue;
transition: all 3s;
};
.five {
background-color: darkgoldenrod;
transition: all 3s;
};
</style>
</head>
<body class="one">
<h1>Javascript Event Challenges: Challenge 29</h1>
<p>Scroll Down!</p>
<script>
var pageTop;
var bodyTag = document.querySelector("body");
window.addEventListener("scroll", function(){
pageTop = window.pageYOffSet;
switch(true) {
case pageTop < 500: bodyTag.className = "one"; break;
case pageTop < 1000: bodyTag.className = "two"; break;
case pageTop < 1500: bodyTag.className = "three"; break;
case pageTop < 2000: bodyTag.className = "four"; break;
default: bodyTag.className = "five";
}
});
</script>
</body>
</html>