JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">

<div id="header_nav">
<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;}

JavaScript

$(function(){
    $('#header_nav').data('size','big');
});

$(window).scroll(function(){
    if($('body').scrollTop() > 0)
    {
        if($('#header_nav').data('size') == 'big')
        {
            $('#header_nav').data('size','small');
            $('#header_nav').stop().animate({
                height:'40px'
            },600);
        }
    }
    else
    {
        if($('#header_nav').data('size') == 'small')
        {
            $('#header_nav').data('size','big');
            $('#header_nav').stop().animate({
                height:'100px'
            },600);
        }  
    }
});