JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <p class="text">Some content within a DIV</p>
</div>

<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling purposes</p>
<p>Some content here for scrolling...

CSS

.wrapper {
    position: fixed;
    width:100%;
    display:block;
    height: 300px;
    background-color: #e4f;
}

.text {
    display: block;
    margin-top: 130px;
}

JavaScript

$(document).scroll(function(){
        if ($(this).scrollTop()>175){
            // animate fixed div to small size:
            $('.wrapper').stop().animate({ height: 57 , 'padding-top': 50},100);
        } else {
            //  animate fixed div to original size
            $('.wrapper').stop().animate({ height: 300, 'padding-top': 0},100);
        }
    });