JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">

<div id="header_nav" data-size="big">
<ul>
<li>Punkt1</li>
<li>Punkt2</li>
<li>Punkt3</li>
<li>Punkt4</li>
</ul>
</div>

</div>

CSS

* {padding:0px; margin:0px;}
#wrapper {height:1200px; width:960px; background-color:#567; margin:auto;}

#header_nav {position:fixed; width:960px; height:auto; background-color:#678; overflow:hidden;}

JavaScript

$(document).ready(function(){
    
    var lastScrollTop = 0;
    
    $(window).scroll(function(){
        
        var st = $(this).scrollTop();
        
        
        if (st > lastScrollTop){
            console.log('down');
            // scrolling down
            if($('#header_nav').data('size') === 'big')
            {
                  $('#header_nav').hidden();
            }
        }
        else
        {
            // scrolling up
            if($('#header_nav').data('size') === 'small')
            {
                            console.log('up');
                $('#header_nav').hidden();
                
            }  
        }
        lastScrollTop = st;
    });
});