On Scroll Up Show Header And Hide On Scroll Down

As you may have notice some website uses fix header which when scrolls down disappear and when scrolled up comes to the fixed location which is controlled by CSS. These type of header increases user engagement to your category pages and sub menus which ultimately increase page views.

These even feel comfortable in small screen devices due to hide property on scroll down. Facebook and some other popular websites also uses same function on there header to increase user engagement.

How to setup fixed header on scroll up ?

Step1: Add below scripts before </head> tag in your html.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script> $(function(){
var lastScrollTop = 0, delta = 5;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if(Math.abs(lastScrollTop - st) &lt;= delta)
      return;
   if (st > lastScrollTop){
       $("#onupshow").css('visibility','hidden');
   } else {
      $("#onupshow").css('visibility','visible');
   }
   lastScrollTop = st;
});});</script>

Step2: Add below CSS to your html. To add CSS in blogger go to Blogger > Theme > Customize > Advanced > Add CSS. For wordpress launch your site customizer then click on the CSS tab to access the CSS editor.

#onupshow{position:fixed;top:0px;left:0px;right:0px;z-index=9999;}

Step3: Add following div tags before and after your header codes.

<div id='onupshow'>

<<HEADER CODES HERE>>

</div>

Step4: Save changes.