Here we are creating a navigation menu that disappears (after a certain amount of scrolling) as you start scrolling down. Then it reappears as you start scrolling back up. This type of functionality has been popping up in the past few years and can potentially be a cool alternative to the constantly visible and fixed navbar.
jQuery and some CSS3 techniques are used to accomplish this effect. In short, we have two classes .is-hidden and .is-visible. These two classes either show or hide the navigation bar using CSS3 transforms. I’ve made the transform effect super slow in the example below so it can be seen clearly. The transforms basically “move” the location of the menu smoothly above the top of the body, out of view.
The jQuery portion contains two functions that add/remove the relevant classes. Then there is a main function that calculates the current scroll position relative to relative to the immediately preceding scroll position. With this function we can tell which direction we are scrolling in, thus being able to fire the correct hide or show function.
OUR EXAMPLE ON CODEPEN
See the Pen Navbar Hide/Appear On Scroll SCSS/jQuery by Mike Doubintchik (@allurewebsolutions) on CodePen.
