鼠标下滑隐藏上滑显示丝滑

要实现的效果

HTML

<nav class="fatherbox">11111</nav>
<div class="box"></div>

CSS

.fatherbox {
    position: fixed;
    top: 0em;
    width: 100%;
    background: #384072;
  }
  .box {
    width: 100%;
    height: 200vh;
  }
  .down {
    height: 0;
    overflow: hidden;
    transition: all 400ms;
  }
  .up {
    transition: all 400ms;
    height: 5em;
  }

JS

var position = $(window).scrollTop();
$(window).scroll(function () {
var scroll = $(window).scrollTop();
    if (scroll > position) {
        $('.fatherbox')
        .stop(true, false)
        .removeClass('up')
        .addClass('down');
        } else {
            //only piece that matters
            $('.fatherbox')
                .stop(true, false)
                .removeClass('down')
                .addClass('up');
        }
        position = scroll;
    });