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;
})
}) ();
