Creating a sticky header bar using jQuery

Many websites use a “sticky” feature in their main navigation menu. The menu scrolls with the page, then sticks to the top once it reaches the top of the viewport. This tutorial show you sample code jQuery create Sticky Header.

1.HTML

<div class="wrapper">
    <div class="header_placeholder"></div>
    <header id="header"></header>
</div>

2. CSS

<style>
#header {
    min-height: 85px;
    background-color: #fff;
    border-bottom: 8px solid #005bac;
    position: relative;
}
#header .is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}
</style>

(function(){
 var stickyHeader = {
  onReady: function () {
   this.doScroll();
  },
  doScroll:function() {
   $(window).scroll(function () {
    stickyHeader.doSticky();
   });
  },
  doSticky: function () {
   var $header = $('#header'),
   headerHeight = $header.height(),
   window_y = $(window).scrollTop();

   if (window_y > headerHeight) {
    if (!$header.hasClass('is-sticky')) {
     $('.header_placeholder').height(headerHeight);
     $header.addClass('is-sticky').css('top', -headerHeight)
     .animate({
      'top': 0
     },300);
    }
   } else {
    if ($header.hasClass('is-sticky')) {
     $('.header_placeholder').height(0);
     $header.removeClass('is-sticky');
    }
   }
  }
 }
  $(document).ready(function(){
    stickyHeader.onReady();
  });
})(jQuery);

Working Demo