How to use the scroll event on the window object In Javascript
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 > w3wiki </ h1 > < div class = "about-container" > < h2 >About w3wiki</ h2 > < h3 >1. Company Profile and Brand:</ h3 > < p > w3wiki 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. w3wiki 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 > w3wiki 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. w3wiki 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.
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: url('https://media.w3wiki.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.w3wiki.org/wp-content/uploads/20230909123918/w3wiki-Wide-logo-black.png'); color: #fff; } </ style > </ head > < body > < div class = "container" > < h1 > w3wiki </ h1 > < div class = "about-container" > < h2 >About w3wiki</ h2 > < h3 >1. Company Profile and Brand:</ h3 > < p > w3wiki 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. w3wiki 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 > w3wiki 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. w3wiki 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:
How to Create a Change Background on Scroll using HTML CSS and JavaScript ?
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.
Contact Us