JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body style="height:2000px">
    <div id="header">
    </div>
</body>
</html>

CSS

#header{height:200px; background:#000; position:fixed; top:0; width:100%;}

JavaScript

$(function(){
    $(window).bind('scroll', function(){
        if($(this).scrollTop() >= 150) {
            $('#header').attr('data-open','open');
        }
        if($(this).scrollTop() >= 150 && $('#header').attr('data-open') == 'open'){
            $("#header").animate({top:'-180px'},500, 'linear').attr('data-open','open');
        }else{
            $("#header").animate({top:'0'},500, 'linear').removeAttr('data-open');
        }
    });
});