← Back to all tutorials

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

The image is a simple text-based graphic with the phrase SCROLL TO SEE EFFECTS centered on a light background. This suggests that the image may be part of an interactive web page or presentation where scrolling down will trigger certain animations or visual changes.
Published on May 19 2024 by Michael Andreuzza

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!

Reviews and opinions

  • "I bought a beautiful theme from Lexington a couple weeks ago. I didn't know Astro at the time, but Michael helped me get set up and really went above and beyond with his support. Now I'm happily redoing my site to look gorgeous with his template."

    Stuart

    Stuart

    Creator of saasydb.com

  • "Michael is one of the best designers on Twitter, would highly recommend his Lexington Themes if you want something in tailwind that doesn’t look the same as everyone else!"

    Alex Hughes

    Alex Hughes

    letsloopin.com

Get lifetime access to every theme available today for $199 and own them forever. Plus, new themes, lifetime updates, use on unlimited projects and enjoy lifetime support.

No subscription required!

Lexington

Beautifully designed HTML, Astro.js and Tailwind themes! Save months of time and build your startup landing page in minutes.