Simple jQuery plugin for making sticky header.
Complete Guide and Demo

Wordpress Version: https://wordpress.org/plugins/advanced-sticky-header/

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

$(document).ready(function(){
  $('.example').stickMe(); 
})

<!-- 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>

/* 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;
}

transitionDuration: 300,
shadow: false,
shadowOpacity: 0.3,
animate: true,
triggerAtCenter: true,
transitionStyle: 'fade',
stickyAlready: false

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