jQuery - hide element upon scrolling down, show element when scroll up

Question

  $(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">