Create Jquery Sticky HeaderAfter Scroll

Previously, we have shared an auto-hide header on scroll and here let’s have a look Jquery sticky header which stays at top of the page after scroll.

It is a simple sticky header which always stays at the top area of the page. It has a main banner where you can include some info and a navigation bar which is basically sticky.

Make Sticky Header using Jquery

To implement you need to call the main Jquery file. Most of the themes already have it. You also need to add sticky.css or copy the style into your theme.

<link rel="stylesheet" type="text/css" href="sticky.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Next thing is simple and all you have to write basic HTML.

<header>
    <div class="header-banner">
        <h1>Jquery sticky header</h1>
    </div>
    <div class="clear"></div>
    <nav>
        <div class="site-title">Frontendscript</div>
        <ul>
            <li><a href="/archive">Archive</a></li>
            <li><a href="/events">Events</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </nav>
</header>

The Javascript is easy to understand and write on a few lines.

<script type="text/javascript">
$(window).scroll(function(){
	if ($(window).scrollTop() >= 300) {
		$('nav').addClass('fixed-header');
		$('nav div').addClass('visible-title');
	}
	else {
		$('nav').removeClass('fixed-header');
		$('nav div').removeClass('visible-title');
	}
});
</script>