Author: | markgoodyear |
---|---|
Views Total: | 2,406 views |
Official Page: | Go to website |
Last Update: | June 3, 2015 |
License: | MIT |
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