How to Create a Change Background on Scroll using HTML CSS and JavaScript ?

Last Updated : 22 Jul, 2024

In this article, we will try to change the background color of the container once the scroll occurs. If a user scrolls down the page the background color will be changed. We will use the below approach to accomplish this task.

Using the scroll event on the window object

In this approach, we will use the scroll event on the window object and pass a callback function to add a new class with a different background color.

Syntax:

$(window).scroll(function(){});

Example: The below example will explain the use of the scroll event to change the background color on scrolling the page.

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width, 
				initial-scale=1.0">
	<title>
		Create a "Change Background on Scroll"
		using HTML, CSS, and JavaScript
	</title>
	<style>
		body{
			background-color: #67a3b8;
			color: #fff;
		}

		.container {
			width: 50%;
			text-align: center;
			margin: auto;
		}

		.about-container{
			text-align: start;
		}

		.scrolled{
			background-color: #b5355c;
		}
	</style>
</head>

<body>
	<div class="container">
		<h1>
			GeeksforGeeks
		</h1>
		<div class="about-container">
			<h2>About GeeksforGeeks</h2>
			<h3>1. Company Profile and Brand:</h3>
			<p>
				GeeksforGeeks is a leading platform that
				provides computer science resources and
				coding challenges for programmers and
				technology enthusiasts, along with interview
				and exam preparations for upcoming aspirants.
				With a strong emphasis on enhancing coding
				skills and knowledge, it has become a trusted
				destination for over 12 million plus registered
				users worldwide. The platform offers a vast
				collection of tutorials, practice problems, interview
				tutorials, articles, and courses, covering various
				domains of computer science.
			</p>
			<p>
				Our exceptional mentors hailing from top colleges &
				organizations have the ability to guide you on a journey
				from the humble beginnings of coding to the pinnacle of
				expertise. Under their guidance watch your skills
				flourish as we lay the foundation and help you
				conquer the world of coding.
			</p>
			<p>
				Our brand is built on the pillars of expertise, 
				accessibility, and community. We strive to empower
				individuals to enhance their programming skills, to 
				bridge the gap between academia and industry, and provide 
				a supportive community to the learners. GeeksforGeeks is
				committed to promoting technological advancement and 
				providing opportunities for growth in the ever-evolving
				field of computer science.
			</p>
			<h3>2. Corporate History, Mission, Vision, and Motto:</h3>
			<h3>Corporate History:</h3>
			<p>
				GeeksforGeeks was founded in 2008 by Sandeep Jain with
				a vision to establish a comprehensive platform for computer
				science education and skill development. Over the years,
				the platform has experienced exponential growth, cementing
				its position as one of the most trusted and renowned names
				in the programming community.
			</p>
			<h3>Mission:</h3>
			<p>	 
				Our mission is to empower programmers and technology enthusiasts
				worldwide to excel in their coding skills and unleash their full
				potential. We want to bridge the gap between theory and practice,
				equipping individuals with skills and expertise required to 
				tackle real-world challenges in the ever evolving field of 
				technology and get them prepared for their dream jobs.
			</p>
			<h3>Vision:</h3>
			<p>
				We envision a world where every programmer has unfettered access
				to top-tier learning resources, enabling them to continuously 
				enhance their skills and flourish amidst the ever-evolving technology 
				landscape. GeeksforGeeks aspires to be the definitive platform for 
				programmers, empowering them to stay at the forefront of their careers 
				and make a significant impact in the dynamic tech industry. With the 
				time we have evolved and introduced other core fields preparation courses 
				to support the young aspirants
			</p>
			<h3>Motto:</h3>
			<p>
				“Learn, Practice, and Excel” – This motto encapsulates our unwavering
				dedication to continuous learning, hands-on practice, and the pursuit 
				of excellence. We firmly believe that learning is an ongoing journey 
				that spans a lifetime, and with persistent practice and unwavering 
				dedication, individuals can truly excel in the vast realm of 
				computer science.
			</p>
		</div>

		<!-- jQuery CDN Link -->
		<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
				integrity=
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
				crossorigin="anonymous"
				referrerpolicy="no-referrer">
		</script>
		
		<script>
			$(document).ready(()=>{
				$(window).scroll(()=>{
					$('body').addClass('scrolled')
				})
			})
		</script>

	</div>
</body>

</html>

Output:

Example 2: The below code example uses the above approach to add a background image on window scroll.

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width, 
				initial-scale=1.0">
	<title>
		Create a "Change Background on Scroll"
		using HTML, CSS, and JavaScript
	</title>
	<style>
		body{
			background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/
20231207115905/GFG_LOGO-removebg-preview.png');
			color: #000;
			background-size: cover;
		}

		.container {
			width: 50%;
			text-align: center;
			margin: auto;
		}

		.about-container{
			text-align: start;
		}

		.scrolled{
			background-image: 
url('https://media.geeksforgeeks.org/wp-content/uploads/20230909123918/GeeksforGeeks-Wide-logo-black.png');
			color: #fff;
		}
	</style>
</head>

<body>
	<div class="container">
		<h1>
			GeeksforGeeks
		</h1>
		<div class="about-container">
			<h2>About GeeksforGeeks</h2>
			<h3>1. Company Profile and Brand:</h3>
			<p>
				GeeksforGeeks is a leading platform that
				provides computer science resources and
				coding challenges for programmers and
				technology enthusiasts, along with interview
				and exam preparations for upcoming aspirants.
				With a strong emphasis on enhancing coding
				skills and knowledge, it has become a trusted
				destination for over 12 million plus registered
				users worldwide. The platform offers a vast
				collection of tutorials, practice problems, interview
				tutorials, articles, and courses, covering various
				domains of computer science.
			</p>
			<p>
				Our exceptional mentors hailing from top colleges &
				organizations have the ability to guide you on a journey
				from the humble beginnings of coding to the pinnacle of
				expertise. Under their guidance watch your skills
				flourish as we lay the foundation and help you
				conquer the world of coding.
			</p>
			<p>
				Our brand is built on the pillars of expertise, 
				accessibility, and community. We strive to empower
				individuals to enhance their programming skills, to 
				bridge the gap between academia and industry, and provide 
				a supportive community to the learners. GeeksforGeeks is
				committed to promoting technological advancement and 
				providing opportunities for growth in the ever-evolving
				field of computer science.
			</p>
			<h3>2. Corporate History, Mission, Vision, and Motto:</h3>
			<h3>Corporate History:</h3>
			<p>
				GeeksforGeeks was founded in 2008 by Sandeep Jain with
				a vision to establish a comprehensive platform for computer
				science education and skill development. Over the years,
				the platform has experienced exponential growth, cementing
				its position as one of the most trusted and renowned names
				in the programming community.
			</p>
			<h3>Mission:</h3>
			<p>	 
				Our mission is to empower programmers and technology enthusiasts
				worldwide to excel in their coding skills and unleash their full
				potential. We want to bridge the gap between theory and practice,
				equipping individuals with skills and expertise required to 
				tackle real-world challenges in the ever evolving field of 
				technology and get them prepared for their dream jobs.
			</p>
			<h3>Vision:</h3>
			<p>
				We envision a world where every programmer has unfettered access
				to top-tier learning resources, enabling them to continuously 
				enhance their skills and flourish amidst the ever-evolving technology 
				landscape. GeeksforGeeks aspires to be the definitive platform for 
				programmers, empowering them to stay at the forefront of their careers 
				and make a significant impact in the dynamic tech industry. With the 
				time we have evolved and introduced other core fields preparation courses 
				to support the young aspirants
			</p>
			<h3>Motto:</h3>
			<p>
				“Learn, Practice, and Excel” – This motto encapsulates our unwavering
				dedication to continuous learning, hands-on practice, and the pursuit 
				of excellence. We firmly believe that learning is an ongoing journey 
				that spans a lifetime, and with persistent practice and unwavering 
				dedication, individuals can truly excel in the vast realm of 
				computer science.
			</p>
		</div>

		<!-- jQuery CDN Link -->
		<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
				integrity=
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
				crossorigin="anonymous"
				referrerpolicy="no-referrer">
		</script>
		
		<script>
			$(document).ready(()=>{
				$(window).scroll(()=>{
					$('body').addClass('scrolled')
				})
			})
		</script>
	</div>
</body>

</html>