Nav hider on mobile screens

by Istvan Lantos

HTML

<header class="main">
Fixed Header – Hides on scroll down, shows on scroll up
</header>

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>-->

CSS

body {
  background-color: #333;
  height: 1500px;
  margin: 0;
  color: #000;
  font-family: helvetica, sans-serif;
  font-size:20px;
}
header { 
	width: 100%;
  height: 70px;
  background-color: #fff;
	position: fixed;
  top: 0;
  transition: top 0.2s ease-in-out;
  padding:25px;
}

JavaScript

function bindNavUp() {
  var lastScrollTop = 0, delta = 5;
  $(window).on('scroll', function() {
    var st = $(this).scrollTop();
   
    if(Math.abs(lastScrollTop - st) <= delta) {
      return;
    };
   
    if (st > lastScrollTop) {
      // downscroll code
      $('header.main').css('top','-50px').hover();
    }
    else {
      // upscroll code
      $('header.main').css('top','0');
    };
    lastScrollTop = st;
  });
};
function unbindNavUp() {
  $(window).unbind('scroll');
};
function handleNavUp() {
  if ($(window).width() < 1600) {
    bindNavUp();
  }
  else {
    unbindNavUp(); 
  };
};
$(document).ready(function() {
  var timer;
  $(window).on('load resize scroll', function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
      handleNavUp();  
    }, 100);
  });
  handleNavUp();
});