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%;
   
    height: 300px;
    background-color: #e4f;
}

.text {
    
    vertical-align: middle;
    height: 100%;
}

JavaScript

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