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.
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.
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.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
.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);
});
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
"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
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
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!
Beautifully designed HTML, Astro.js and Tailwind themes! Save months of time and build your startup landing page in minutes.