Auto Hide Sticky Header on Scroll with Jquery

Category: Navigation | July 15, 2018
Auto hide sticky header
Author: jasper
Official Page: Go to Website
Last Update:March 28, 2019

The Auto-hide header automatically hides the sticky header on scroll the page. It is built with Jquery and when a user scrolls down to the page, the main header part will be going back with animation and hide it so the user can see the full page.

Such headers are a great solution if you want to achieve maximum readability. It makes your site more user-friendly so they can easily read the content on the page.

Implement Auto Hide Sticky Header

You simply need to call the header.css file and add the main jQuery file.

<link rel="stylesheet" type="text/css" href="header.css" />
<script type="text/javascript" src="">

To implement header on your website, you need to add following HTML code.

<header class="header" role="banner">
<div class="container">
    <li class="active"><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">four</a></li>

Also, make sure to define the main content area.

<div class="content container" role="main">
Here you can add content or other html element.

The Javascript Function for Scrolling

Finally, Make sure to define the Javascript.

$( document ).ready(function() {
	var position = 0;
	$(window).scroll(function(e) {
	  var $element = $('.header');
	  var scrollTop = $(this).scrollTop();
	  if( scrollTop <= 0 ) { 
	  } else if( scrollTop < position ) {
	  } else if( scrollTop > position ) {
		if( scrollTop + $(window).height() >=  $(document).height() - $element.height() ){
		} else if(Math.abs($element.position().top) < $element.height()) {
	  position = scrollTop;

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.