We know that nowadays everyone wants something flashy and eye catching but the majority of the time, at Daddy Design we prefer a simplistic approach that functions much smoother and more efficiently. We will take pure clean code vs bloated code any day, which is why when we were tasked with changing the background color of a Header when the user scrolled the page on a project we decided to create a simple elegant solution. In this tutorial we will teach you how to easily change the Header background color on scroll using minimal JavaScript to create a quick simple elegant solution.

*Please note that this is a very bare bones example of how to set up the structure and you will need to have an understanding of HTML and CSS to style this to fit your particular needs.

STEP 1: Create a Header element using HTML

In Step 1, we will be creating a simple Header element using HTML.

HTML

<header id="header">Header</header>

Items to Note:

This is a bare bones working example and you will need to add your Header elements to fit your particular needs.

STEP 2: Use CSS to style the Header element

In Step 2, we will utilize CSS to style the basic Header element.

CSS

#header{
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
right: 0;
color: #000;
background: #ccc;
z-index: 9999;
}

Items to Note:

1. Adjust the height of the Header to fit your particular needs.
2. Adjust font and link colors to fit your particular needs.
3. Adjust the background color to fit your particular needs.
4. Z-index may need to be adjusted depending on other elements in your code.

STEP 3: Use CSS to set up the alternate Header

In Step 3, we will utilize another CSS class that will be triggered in Step 4 with JavaScript to override the style for the Header element.

CSS

#header.black{
color: #fff;
background: #000;
}

Items to Note:

1. Make sure if you change the CSS class name that you adjust it in the next step as well.
2. If the font and link colors conflict with your new background color then make sure to adjust them.
3. Adjust the alternate background color to fit your particular needs.

STEP 4: Use JavaScript to trigger the alternate CSS class for the Header

In the final step, we will utilize JavaScript and the scroll function to trigger the alternate CSS class for the Header element when the user scrolls the page. Basically all that is happening with this simple script is that the CSS class is added and removed based on the scroll point set which results in a quick smooth change of background color for the Header.

JS

$(window).scroll(function() {
	var scroll = $(window).scrollTop();
	if (scroll >= 60) {
        $('header').addClass("black");
	} else {
        $('header').removeClass("black");
	}
});

Items to Note:

1. Adjusting the number 60 will adjust how fast or slow the change happens during scroll.
2. If you want to change your CSS class name then make sure you update it in both places.

Full Code

HTML

<header id="header">Header</header>

CSS

#header{
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
right: 0;
color: #000;
background: #ccc;
z-index: 9999;
}

JS

$(window).scroll(function() {
	var scroll = $(window).scrollTop();
	if (scroll >= 60) {
        $('header').addClass("black");
	} else {
        $('header').removeClass("black");
	}
});

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again. Please do not email us with problems regarding this tutorial unless you want to hire us.

Hire Us

If you are unfamiliar with web development and need hep with your website we are available for hire. Please contact us in order to receive a quote for this or any other service.

Request a Free Quote