How to make sticky header

This post is about how to make sticky header on you website. Normally, I will the sticky header from the theme that we use. But some website has a custom theme that I made personally. In that case, some clients also wants to have the sticky header that look different before and after they scroll down. However, most sticky header will have the same look before and after. The main idea is to use jQuery to attach a new class to the header when the user scroll down. This is the code for the sticky header, in this case the header has the class “site-header main”.

The code

(function($, document, window){
	"use strict";

	$(window).scroll(function() {
		if ($(this).scrollTop() > 1){  
		    $('.site-header-main').addClass("sticky-header");
		  }
		  else{
		    $('.site-header-main').removeClass("sticky-header");
		  }
		});

})(jQuery, document, window);

What the code does is simply if someone starts to scroll “$(this).scrollTop() > 1” then add the class sticky-header to the header. Depending on the look you want to achieve, you need to change the CSS of “.site-header-main” and “site-header-main.sticky-header”.  In this case, I use different height of before and after the addition of the class. I also use different transparency and remove the rotating logo. This is the final look on the website.

The result

I have use in one of the my project, the website its live now on MotionPark.nl