Scroll Smooth Navbar

HTML
<nav> <ul> <li><a href="">Home</a></li> <li><a href="">Menu</a></li> <li><a href="">Gallary</a></li> <li><a href="">Service</a></li> <li><a href="">About</a></li> </ul> </nav> <div class="main-content"> </div> <div class="footer"> <p>Built with all the ❤ in the world by Mohaiman </p> </div>
CSS
*{margin: 0px; padding: 0px} nav { position: fixed; width: 100%; top: 0; background: #2c3e50; text-align: center; padding: 30px 0; transition: all 0.3s ease; } nav.hide { transform: translate3d(0,-100%,0); -webkit-transform: translate3d(0,-100%,0); -moz-transform: translate3d(0,-100%,0); -o-transform: translate3d(0,-100%,0); } nav ul li { display: inline-block; margin-right: 60px; } nav ul li:last-child { margin-right: 0; } nav ul li a { text-decoration: none; text-transform: uppercase; color:#fff; font-family: Arial, sans-serif; } .main-content { height: 1200px; background: #16a085; } .footer { padding: 20px; font-family: Arial, sans-serif; background: #1abc9c; text-align: center; }
JAVASCRIPT
(function() { var documentElem = $(document), nav = $('nav'), lastScrollTop = 0; documentElem.on('scroll', function(){ var currentScrollTop = $(this).scrollTop(); if(currentScrollTop > lastScrollTop) nav.addClass('hide'); else nav.removeClass('hide'); lastScrollTop = currentScrollTop; }) }) ();
Expand for more options Login