How to Create Responsive Sticky Header with jQuery

Sticky headers are quite popular these days probably due to the fact that they are quicker to use and navigate. These headers are particularly useful for menus and CTAs for the users to see. It is estimated that sticky navigations are 22% quicker to navigate and fixed headers are preferred to benefit usability.

If you are willing to use a sticky header and you are not using any popular grid layout framework (such as Foundation or Bootstrap), you will find today’s solution very useful.

Fixed Header jQuery plugin is an easy and simple way to create a header navigation that will stick to the top of the page and stay there while the page is scrolled. This solution can be considered especially for lengthy web pages.

This tiny plugin comes with a breakpoint option which will give you the option to specify the width of the screen where Fixed Header height and/or contents can be changed and adapted to fit a specific device.

How to use Fixed Header:

#1 – First of all, you need to create a header element for your responsive website:

<header id="primary-header">
Header Content
</header>

#2 – Second step is to wrap the content into a container with a class called “page-wrapper”:

<div class="page-wrapper">
Main Content Goes Here
</div>

#3 – Include the Fixed Header jQuery plugin and load the jQuery library at the bottom of your document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.fixedHeader.js"></script>

#4 – The next step is to make the header fixed when the page is scrolled. This is achieved by adding a few lines of code:

<script>
$("#primary-header").fixedHeader({contentElement: ".page-wrapper", // main wrapper 
class: "fixed-header" // additional CSS class 
});
</script>

#5 – Add the following CSS styles to finish off the fixed header positioning.

.fixed-header {
position: fixed;
top: 0;
left: 0;
 width: 100%;}

#6 – The breakpoint

<script>
$("#primary-header").fixedHeader({
contentElement: ".page-wrapper", // main wrapper
class: "fixed-header", // additional CSS class
breakpoint: 400 // adjust the breakpoint to fit the needs of the website
});
</script>

DEMO DOWNLOAD

That is it. After following all the steps, a fixed header should be present on your website. You should be able to use a responsive navigation together with the Fixed Header plugin.

Leave a comment in case of any issues or just leave the link if you use this plugin. Check out for other wonderful jQuery plugins.

Sticky Header on Github.