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

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