$(window).load(function() {
var headerM = $('.header-mobile-view'),
navHeader = $('nav.nav-new.navbar-new');
var downScroll = 0;
if ($(window).width() < 768) {
$(window).scroll(function(event){
var scroll = $(this).scrollTop();
if (scroll > downScroll){
// navHeader.hide();
navHeader.removeClass('in').addClass('out');
console.log('out!');
// }
} else {
// navHeader.show();
navHeader.removeClass('out').addClass('in');
console.log('in!');
}
downScroll = scroll;
});
}
else {
// do nothing
}
});
CSS
.navbar-new {
@media (max-width: 768px) {
// display: none;
position: fixed;
transition: all .3s .2s ease-in-out;
// bottom: -48px;
&.in, &.out {
cursor: pointer;
transition: all .3s .2s ease-in-out;
}
&.in {
top: 0;
}
&.out {
top: -71px;
}
}
}
HTML output
<!--When scroll down-->
<nav class="navbar-new out">
<!--When scroll up-->
<nav class="navbar-new in">