JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">this is header</div>

CSS

body {
    height:4000px;
}
#header {
    height:150px;
    background:red;
}
.resized {
    height:50px !important;
    width:100%;
    position:fixed;
}

JavaScript

$(window).scroll(function (event) {
            var y = $(this).scrollTop(); //set position from top in pixels
            if (y >= 300) {
                $('#header').addClass('resized');
            } else {
                $('#header').removeClass('resized');
            }
        });