jQuery plugin for sticky header

Sticky Header

Simple jQuery plugin for making sticky header.
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: false

Customizing

Events

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