title: Hide the footer onload and show on scroll
body: <p>I want as my footer to show on scroll down and hide when scroll up and reach delta. Now it is showing from beginning on scroll down is there and when scroll up is hide before reach the delta. Can anyone help me to hide it onload and show when is more than delta and hide on scroll up when is before delta?</p>
  
  <p><a href="http://fiddle.jshell.net/764396ho/" rel="nofollow">http://fiddle.jshell.net/764396ho/</a> </p>
  
  <p>jQuery</p>
  
  <pre><code>var didScroll;
  var lastScrollTop = 0;
  var delta = 5;
  var navbarHeight = $('footer').outerHeight();
  
  $(window).scroll(function(event){
      didScroll = true;
  });
  
  setInterval(function() {
      if (didScroll) {
          hasScrolled();
          didScroll = false;
      }
  }, 250);
  
  function hasScrolled() {
      var st = $(this).scrollTop();
      if(Math.abs(lastScrollTop - st) &lt;= delta)
          return;
  
      if (st &gt; lastScrollTop &amp;&amp; st &gt; navbarHeight){
         $('footer').removeClass('nav-up').addClass('nav-down');
      } else {
          if(st + $(window).height() &lt; $(document).height()) {
              $('footer').removeClass('nav-down').addClass('nav-up');
          }
      }
      lastScrollTop = st;
  }
  </code></pre>