How to hide/show nav bar when user scrolls up/down

Question

Hide/show nav bar when user scrolls up/down

Here\'s the example I\'m trying to achieve: http://haraldurthorleifsson.com/ or http://www.teehanlax.com

Answer 1

Whatever navbar element you use, it has to include a transition: transform 0.3s on it, and a base transform of 0.

#navbar {
    position: fixed;
    right: 0; left: 0; top: 0; 
    /* your height */
    height: 40px;
    /* .... */
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transition: -webkit-transform .3s;
    -moz-transition: -moz-transform .3s;
    -o-transition: transform .3s;
    transition: transform .3s;
}
#navbar.scrolled {
    /* subtract your height */
    -webkit-transform: translate3d(0,-40px,0);
    -moz-transform: translate3d(0,-40px,0);
    transform: translate3d(0,-40px,0);
}

Then your javascript needs to watch the user's scrolling:

;(function (){
    var previousScroll = 0;
    var navbar = document.getElementById('navbar'),
        navClasses = navbar.classList; // classList doesn't work  previousScroll;

       if ( isDown && !navClasses.contains('scrolled') ){
          // scrolling down, didn't add class yet
          navClasses.add('scrolled'); // we hide the navbar
       } else if ( !isDown ){
          // scrolling up
          navClasses.remove('scrolled'); // won't error if no class found
       }

       // always update position
       previousScroll = currentScroll;
    });
}()); //run this anonymous function immediately