Sticky Header
Simple jQuery plugin for making sticky header.
Complete Guide and Demo
Wordpress Version: https://wordpress.org/plugins/advanced-sticky-header/
HTML
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/sticky-header.js"></script>
<header class="example"> <!-- header stuff ... --> </header>
Call the plugin
$(document).ready(function(){ $('.example').stickMe(); }) Plugin classes
<!-- Now plugin adds classes to your header on page load --> <header class="example stick-me not-sticking"> <!-- header stuff ... --> </header>
<!-- Header is sticky --> <header class="example stick-me sticking"> <!-- header stuff ... --> </header>
Something about styles
/* Make sure your header has z-index and background set and it's also full width */ .example { width: 100%; z-index: 999; background-color: #ffffff; }
/* OR you can also style plugin's class .sticking, that way you can style it differently when it's sticking */ .sticking { width: 100%; z-index: 999; background-color: #ffffff; }
Defaults
transitionDuration: 300, shadow: false, shadowOpacity: 0.3, animate: true, triggerAtCenter: true, transitionStyle: 'fade', stickyAlready: falseCustomizing
| Variable | Type | Example | Description |
|---|---|---|---|
| topOffset | int | topOffset: 300 | Header will become sticky when the body is scrolled down by 300 pixels |
| shadow | boolean | shadow: true | Header will have shadow when it becomes sticky |
| shadowOpacity | float | shadowOpacity: 0.5 | This sets the opacity of shadow that header gets when it's sticky |
| animate | boolean | animate: true | This brings header into display smoothly |
| transitionStyle | string | transitionStyle: 'fade' | Transition style for header when it becomes sticky 'fade' 'slide' |
| triggetAtCenter | boolean | triggerAtCenter: false | By default header becomes sticky when it reaches the center of viewport, setting it to false will make header sticky just when header is scrolled out of the viewport |
| stickyAlready | boolean | stickyAlready: true | Makes header sticky when page loads |
| transitionDuration | int | transitionDuration: 1000 | Transition duration of animation |
Events
| Event | Description |
|---|---|
| sticky-begin | When header gets sticky |
| sticking | When header is sticking (This event is called every time page is scrolled and header is sticky) |
| top-reached | When document's top is reached |
| bottom-reached | When document's bottom is reached |
Using Events
$(document).ready(function(){ $('.site-header').on('sticky-begin', function() { console.log("Began"); });$('.site-header').on('sticking', function() { console.log("Sticking"); });
$('.site-header').on('top-reached', function() { console.log("Top reached"); });
$('.site-header').on('bottom-reached', function() { console.log("Bottom reached"); }); })
