Open In App

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

Last Updated : 10 Jan, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML




<!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=
                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:

changeBgScrollGIF

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

HTML




<!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:
            color: #000;
            background-size: cover;
        }
 
        .container {
            width: 50%;
            text-align: center;
            margin: auto;
        }
 
        .about-container{
            text-align: start;
        }
 
        .scrolled{
            background-image:
            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=
                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:

changeBgScrollGIF



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads