Pure Javascript Sticky Header Show On Scroll – headhesive.js

Category: Navigation | July 18, 2018
Javascript Sticky Header Show On Scroll
Author: markgoodyear
Official Page: Go to Website
Last Update:March 28, 2019
License:MIT

The headhesive.js is an on-demand sticky header which builds in pure javascript. It is fully customizable and lightweight plugin which allows you to quickly create the header which visible after scrolling the page to the certain part.

There are many sticky header plugins available which relied on JQuery and had many extra features which don’t need. The jQuery isn’t an always bad thing but if you looking for lightweight and dependency free solution then headhesive.js can be the first choice.

Let’s Show Header When User Scroll Down the Page

Headhesive.js is a standalone JavaScript plugin with no dependencies. It also provides a stylesheet file for a basic design. Let add both in the head.

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

Write the header HTML and you can do that by following.

<header class="banner">
    <nav class="container">
        <h1 class="logo">Headhesive.js</h1>
        <ul class="nav">
            <li class="nav__item"><a rel="nofollow" href="https://twitter.com/markgdyr">@markgdyr</a></li>
        </ul>
    </nav>
</header>

There is no styles are injected via the plugin, keeping the plugin lightweight and as user customizable as possible. To create a basic hide/show effect we need to add some CSS magic to the cloned element:

.headhesive--clone {
  position: fixed;                   /* fix the element */
  top: 0;                            /* make sure it's at the top */
  transform: translateY(-100%);      /* move it off screen */
  transition: all 300ms ease-in-out; /* add animation */
}

Initialise the Sticky Header

<script>
var options = {
	offset: '#showHere',
	offsetSide: 'top',
	classes: {
		clone:   'banner--clone',
		stick:   'banner--stick',
		unstick: 'banner--unstick'
	}
};
// Initialise with options
var banner = new Headhesive('.banner', options);
</script>

 

You May Also Like

Leave a Comment