Hide header on scroll down, show on scroll up

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<body>
    <div id="menuicon">
        <a href="#" alt="">
            <span></span>
        </a>
    </div>
</body>

CSS

body {
    height: 100vh;
    background-color: #fff;
    font: 23px Arial sans-serif;}

/*...........ICON............*/
 
     #menuicon {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 26px;
    height: 27px;}
 
     #menuicon a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;}

     span, #menuicon a:before, #menuicon a:after {
    display: block;
    position: absolute;
    height: 2px;
    width: 26px;
    left: 0;
    background-color: #000;

    transform-origin: 0 50%;
    transition: 0.35s ease;}
  
     span {
    top: 9px;
    opacity: 1;}

     #menuicon a:before{
    top: 0;
    content: "";}
  
     #menuicon a:after {
    width: 17px;
    top: 18px;
    content: "";}
    
     .bchanged {
    transform: rotateX(45deg);}
  
     .schanged {
    opacity: 0;}
   
     .achanged {
    transform: rotateX(-45deg);
    width: 26px;}

JavaScript

var nCount = $.cookie('user_count') != undefined ? $.cookie('user_count', Number) : 0;
            function open()
            { if (nCount%2 != 0) {
                $('#menuicon a:before').addClass('bchanged');
                $('#menuicon a:after').addClass('achanged');
                $('span').addClass('schanged');}
              else {
                $('#menuicon a:before').removeClass('bchanged');
                $('#menuicon a:after').removeClass('achanged');
                $('span').removeClass('schanged');}

            }
            open();

            $('#menuicon').click(function() {
              nCount++;
              $.cookie('user_count', nCount, { expires: 1, path: '/' });
              open()
            });