How to change background color on scroll with Tailwind CSS and JavaScript

Live Demo Get the code

Today Sunday we are doing a short tutorial on how to change the background color of a header and sections based on the user’s scroll position, enhancing the overall user experience and engagement.

Why would we use this approach?

More engaging websites: Using parts of your site that react, like a header that shifts color when you scroll, makes your site feel more interactive and engaging.
Better browsing experience: When your site adapts and changes based on what the user does, like changing layouts or styles, it makes everything feel smoother and easier to use.
Clearer feedback for users: Giving users visual cues, such as altering the background color of sections as they scroll, helps them know where they are on your site.
Easier to manage site reactions: With JacaScript, you can add interactive features to your website without making things too complicated.

The structure

Understanding the code:

id="section-1": This is the id of the first section.
id="section-2": This is the id of the second section.
id="section-3": This is the id of the third section.

Classes are removed for brevity, but I’ll keep those classes relevant to the tutorial.

<section
  id="section-1">
  <h2>Section #01</h2>
</section>
<section
  id="section-2">
  <h2 class="text-white">Section #02</h2>
</section>
<section
  id="section-3">
  <h2 class="text-white">Section #03</h2>
</section>

As you can see, each section has an id that corresponds to the number of the section. Not a bit deal here. But what if we want to change the background color of each section based on the user’s scroll position? We can do that with JavaScript.

The script

document.addEventListener("scroll", () => {: This is the event listener that listens for scroll events on the window object.
const header = document.getElementById("header");: This is the code that gets the header element and stores it in a variable.

Change the background color of the section

const sections = [{: This is the code that creates an array of objects that represent the sections on the page.
element: document.getElementById("section-1"),: This is the code that gets the first section element and stores it in the element property of the object.
offset: 50,: This is the code that sets the offset property of the object to 50.
color: "#e9e9e9",: This is the code that sets the color property of the object to #e9e9e9.

Delay the style

setTimeout(() => {: This is the code that sets a timeout function that will be executed after 100ms.
header.classList.toggle("bg-white", window.scrollY > 50);: This is the code that toggles the bg-white class on the header element based on whether the user has scrolled past 50px.
header.classList.toggle("bg-transparent", window.scrollY <= 50);: This is the code that toggles the bg-transparent class on the header element based on whether the user has scrolled past or equal to 50px.
sections.forEach((section) => {: This is the code that iterates over each object in the sections array.
if (window.scrollY > section.offset) {: This is the code that checks if the user has scrolled past the offset property of the current object.
section.element.style.backgroundColor = section.color;: This is the code that sets the background color of the current section element to the color property of the current object.
} else {: This is the code that executes if the user has not scrolled past the offset property of the current object.
section.element.style.backgroundColor = "white";: This is the code that sets the background color of the current section element to white.
100);: This is the code that sets a delay of 100ms before executing the next line of code.

document.addEventListener("scroll", () => {
    const header = document.getElementById("header");
    const sections = [{
            element: document.getElementById("section-1"),
            offset: 50,
            color: "#e9e9e9",
        },
        {
            element: document.getElementById("section-2"),
            offset: 150,
            color: "#f92c1c",
        },
        {
            element: document.getElementById("section-3"),
            offset: 250,
            color: "#000000",
        },
    ];

    setTimeout(() => {
        header.classList.toggle("bg-white", window.scrollY > 50);
        header.classList.toggle("bg-transparent", window.scrollY <= 50);

        sections.forEach((section) => {
            if (window.scrollY > section.offset) {
                section.element.style.backgroundColor = section.color;
            } else {
                section.element.style.backgroundColor = "white";
            }
        });
    }, 100);
});

Conclusion

This is a simple script that can be used to change the background color of a header and sections based on the user’s scroll position. It’s a great way to enhance the user experience and engagement on your website. Remember to keep the code clean and easy to understand, and don’t forget to test it on different devices and browsers to ensure it works well and make it accessible to all users.

Hope you enjoyed this tutorial and have a great day!

/Michael Andreuzza

Did you like this tutorial? Please share it with your friends!