juristr
12/23/2013 - 8:41 PM

This script hides the navbar '.js-navbar' when scrolling downwards on a page and shows it again when scrolling upwards. Used this on my blog

This script hides the navbar '.js-navbar' when scrolling downwards on a page and shows it again when scrolling upwards. Used this on my blog for articles and hiding the top-navbar.

hidenavbar.js
content_copyfile_download
/* 
  This script hides the navbar '.js-navbar'
  when scrolling downwards on a page and shows it again
  when scrolling upwards
*/
$(function(){
  var $nav = $('.js-navbar'),
      _hideShowOffset = 20,
      _lastScroll = 0,
      _detachPoint = 50;

  $(window).scroll(function(){
    var t = $(window).scrollTop(),
        e = t > _lastScroll ? "down" : "up",
        i = Math.abs(t - _lastScroll);

    if(t >= _detachPoint || 0 >= t || t > -1){
      if('down' === e && i >= _hideShowOffset){
        $nav.slideUp();
      }else if('up' === e && i >= _hideShowOffset){
        $nav.slideDown();
      }
    }

    _lastScroll = t;
  });
});