JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu"></div>
<section id="filler">
    
    <h1>erikford.you</h1>
    
    <img src="http://placehold.it/350x150"/>
    
    <h1>is that you erik ford?</h1>
    
    <img src="http://placehold.it/350x150"/>
    
</section>

CSS

body{margin:0;padding:0;}

.menu {
    width: 100%;
    height: 75px;
    background: #000;
    position:fixed;
    top:0;
    left:0;
    transition: height .5s linear;
    opacity: 0.6;
}

.prop{ height:55px; }

#filler{ width:100%; height: 1000px; background-color:white;margin:0;}

JavaScript

$(window).scroll(function(){
    if($('body').scrollTop() > 200){
        $(".menu").addClass('prop');
    }
    else{
       $(".menu").removeClass('prop');
    }
});