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

Comments

Popular posts from this blog

PHP: Date Difference for PHP 5.2

HTML5 video loop src change on end play function

display the_content with setup_postdata