【jQuery】下スクロールで消えて、上スクロールで再表示するヘッダーメニュー

<div class="header">
  <div class="menu">
    <div class="inner">sample text</div>
  </div>
</div>

.menu {
    width: 100%;
    height: 50px;
    position: fixed;
    left: 0;
    top: 0;
    transition: 1s;
}
.menu.hide {
    transform: translateY(-50px);
}

$(function() {
    var pos = 0;
    var header = $('.menu');
    $(window).on('scroll', function() {
        if ($(this).scrollTop() < pos) {
            header.removeClass('hide');
        }
        else {
            header.addClass('hide');
        }
        pos = $(this).scrollTop();
    });
});