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

Category: Javascript , Menu & Navigation | June 3, 2015
Author: markgoodyear
Views Total: 3,112
Official Page: Go to website
Last Update: June 3, 2015
License: MIT


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


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


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);



  • Bugfix

You Might Be Interested In:

Leave a Reply