In this tutorial we will learn how to Change Background Color On Scroll using JavaScript. JavaScript and HTML codes are give below.
Table of Contents
HTML Code
HTML Code is given below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change background color on scroll</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
body{
height: 2000px;
}
#output{
font-size:40px;
position: fixed;
text-align:center;
width: 100%;
}
</style>
</head>
<body onscroll="myFunction()">
<p id='output'>Scroll: 0%</p>
<script src="script.js"></script>
</body>
</html>
JavaScript Code
Take a look at the JavaScript code given below.
<script>function myFunction(){
var scrollTop = document.documentElement.scrollTop;
var docHeight = document.documentElement.offsetHeight;
var winHeight = window.innerHeight;
// getting scroll percentage
var scrollPercent = (scrollTop) / (docHeight - winHeight);
// rounding it off
scrollPercent = Math.round(scrollPercent*100);
var output = 'Scroll: ' + scrollPercent + '%';
// displaying percentage
document.getElementById('output').innerHTML= output;
// changing bg color
if(scrollPercent>0)
{
document.getElementsByTagName("BODY")[0].style='background-color:white;';
}
if(scrollPercent>25)
{
document.getElementsByTagName("BODY")[0].style='background-color:yellow;';
}
if(scrollPercent>50)
{
document.getElementsByTagName("BODY")[0].style='background-color:green;';
}
if(scrollPercent>75)
{
document.getElementsByTagName("BODY")[0].style='background-color:red;';
}
}
</script>
Video Tutorial
Watch video tutorial on How To Change Background Color On Scroll using JavaScript.