Make Sticky Header Hide on Scroll Down and Show on Scroll Up


Make Sticky Header Hide on Scroll Down and Show on Scroll Up - This tutorial was requested by Kompi's friends on the post how to make a floating menu when discrolling with CSS and javascript. This time we will make the floating header hide when the page is down and will appear when the discroll is up and when it reaches the bottom of the page.

Unlike the previous tutorial that made sticky on the menu under the header, this time we will give show hide effect on the floating header. For that I look for ways that only use CSS and javascript, and here's how.

So in the initial situation, the header is floating and sticking to the top of the page as shown below:



In the header there can be a blog title and menu with an equal position. Simply put, the HTML code for this header is like the following example:

<header class="header" role="banner">
<div class='content-wrapper'>
<h1>HEADER BLOG</h1>
<div class='topnav'>
<ul>
<li><a href='#' title='About'>About</a></li>
<li><a href='#' title='Contact'>Contact</a></li>
<li><a href='#' title='Privacy'>Privacy</a></li>
<li><a href='#' title='Sitemap'>Sitemap</a></li>
<li><a href='#' title='Pasang Iklan'>Pasang Iklan</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</header>

The focus here is to add class = "header" to the header tag.

And the second most important thing is to use the following CSS to make the header float and have a slider effect when showing hide headers.

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1);
  transition-timing-function: cubic-bezier(.215, .61, .355, 1);
  -webkit-transition-property: -webkit-transform;
  transition-property: transform
}
.header--hidden {
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%)
}

You can add other styles to the CSS above to display the header.

Then add the following javascript above the </body> code. Because this is pure javascript, it doesn't require Jquery Library.

<script>
  //<![CDATA[
  /*
    By Osvaldas Valutis, www.osvaldas.info
    Available for use under the MIT License
  */


  ;
  (function(document, window, index) {
    'use strict';

    var elSelector = '.header',
      elClassHidden = 'header--hidden',
      throttleTimeout = 500,
      element = document.querySelector(elSelector);

    if (!element) return true;

    var dHeight = 0,
      wHeight = 0,
      wScrollCurrent = 0,
      wScrollBefore = 0,
      wScrollDiff = 0,

      hasElementClass = function(element, className) {
        return element.classList ? element.classList.contains(className) : new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
      },
      addElementClass = function(element, className) {
        element.classList ? element.classList.add(className) : element.className += ' ' + className;
      },
      removeElementClass = function(element, className) {
        element.classList ? element.classList.remove(className) : element.className = element.className.replace(new RegExp('(^|\b)' + className.split(' ').join('|') + '(\b|$)', 'gi'), ' ');
      },

      throttle = function(delay, fn) {
        var last, deferTimer;
        return function() {
          var context = this,
            args = arguments,
            now = +new Date;
          if (last && now < last + delay) {
            clearTimeout(deferTimer);
            deferTimer = setTimeout(function() {
              last = now;
              fn.apply(context, args);
            }, delay);
          } else {
            last = now;
            fn.apply(context, args);
          }
        };
      };

    window.addEventListener('scroll', throttle(throttleTimeout, function() {
      dHeight = document.body.offsetHeight;
      wHeight = window.innerHeight;
      wScrollCurrent = window.pageYOffset;
      wScrollDiff = wScrollBefore - wScrollCurrent;

      if (wScrollCurrent <= 0) // scrolled to the very top; element sticks to the top
        removeElementClass(element, elClassHidden);

      else if (wScrollDiff > 0 && hasElementClass(element, elClassHidden)) // scrolled up; element slides in
        removeElementClass(element, elClassHidden);

      else if (wScrollDiff < 0) // scrolled down
      {
        if (wScrollCurrent + wHeight >= dHeight && hasElementClass(element, elClassHidden)) // scrolled to the very bottom; element slides in
          removeElementClass(element, elClassHidden);

        else // scrolled down; element slides out
          addElementClass(element, elClassHidden);
      }

      wScrollBefore = wScrollCurrent;
    }));

  }(document, window, 0));
  //]]>
</script>

And this is the result.



Live DEMO

Source code: https://osvaldas.info/auto-hide-sticky-header