Simple On-demand Sticky Header With Pure JS – Headhesive.js

Preview:

Description:

Headhesive.js is a simple lightweight script to create a sticky top navigation bar that only appears as you scroll down the web page.

How to use it:

Include the required headhesive.css in the head of your document.

<link rel="stylesheet" href="css/headhesive.css">

Create a regular top navigation bar that will become an animated & fixed one as you scroll down the page.

<header class="banner">
  Your header content goes here
</header>

Include the Headhesive.js script at the bottom of your document.

<script src="path/to/headhesive.js"></script>

Enable the sticker header with a little Javascript.

// Options
var options = {
// Scroll offset. Accepts Number or "String" (for class/ID)
offset: 300, // OR — offset: '.classToActivateAt',
// Custom classes
classes: {
// Cloned elem class
clone: 'banner--clone',
// Stick class
stick: 'banner--stick',
// Unstick class
unstick: 'banner--unstick'
},
// Throttle scroll event to fire every 250ms to improve performace
throttle: 250,
// Callbacks
onInit: function() {},
onStick: function() {},
onUnstick: function() {},
onDestroy: function() {},
}
// Create a new instance of Headhesive and pass in some options
var header = new Headhesive('.baner', options);

Changelog:

06/16/2015

• Bugfix