joshuapekera
8/4/2015 - 8:01 PM

A CodePen by Philip Benton. Navigation Bar Show on Scroll Up - Navigation bar fixed at the top of the browser which hides upon scrolling dow

A CodePen by Philip Benton. Navigation Bar Show on Scroll Up - Navigation bar fixed at the top of the browser which hides upon scrolling down the page. Upon scrolling up the bar shows itself. No need to scroll to the top of the browser window.

style.scss
content_copyfile_download
@import "compass";
.navigation-bar {
  background-color: GhostWhite;
  border: 1px solid Gainsboro;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000;
  
  &.is-hidden {
    opacity: 0;
    -webkit-transform: translate(0,-60px);
    -webkit-transition: -webkit-transform .2s,background .3s,color .3s,opacity 0 .3s;
  }
  
  &.is-visible {
    opacity: 1;
    -webkit-transform: translate(0,0);
    -webkit-transition: -webkit-transform .2s,background .3s,color .3s;
  }
  
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    
    li {
      display: inline-block;
      padding: 1em;
    }
  }
}


.content {
  min-height: 1200px; 
}
script.js
content_copyfile_download
$(document).ready(function(){

/** ===========================================
    Hide / show the master navigation menu
============================================ */

  console.log('Window Height is: ' + $(window).height());
  console.log('Document Height is: ' + $(document).height());

  var previousScroll = 0;

  $(window).scroll(function(){

    var currentScroll = $(this).scrollTop();

    /*
      If the current scroll position is greater than 0 (the top) AND the current scroll position is less than the document height minus the window height (the bottom) run the navigation if/else statement.
    */
    if (currentScroll > 0 && currentScroll < $(document).height() - $(window).height()){
      /*
        If the current scroll is greater than the previous scroll (i.e we're scrolling down the page), hide the nav.
      */
      if (currentScroll > previousScroll){
        window.setTimeout(hideNav, 300);
      /*
        Else we are scrolling up (i.e the previous scroll is greater than the current scroll), so show the nav.
      */
      } else {
        window.setTimeout(showNav, 300);
      }
      /* 
        Set the previous scroll value equal to the current scroll.
      */
      previousScroll = currentScroll;
    }

  });

  function hideNav() {
    $("[data-nav-status='toggle']").removeClass("is-visible").addClass("is-hidden");
  }
  function showNav() {
    $("[data-nav-status='toggle']").removeClass("is-hidden").addClass("is-visible");
  }

});
index.html
content_copyfile_download
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    
    <nav class="navigation-bar is-visible" data-nav-status="toggle">
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Services</li>
        <li>Blog</li>
        <li>Contact</li>
      </ul>
    </nav>
    
    <section class="content"></section>
  </body>
</html>