How to Create a Change Background on Scroll using HTML CSS and JavaScript ?
Last Updated :
22 Jul, 2024
Improve
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>
<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>
<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>Output:
