JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="header">
        <div id="profile-pic-bg"></div>
    </div>
</div>

CSS

.wrap{
    min-height:1000px;
    background:grey;
}

.header{
    position:fixed;
    background:black;
    height:100px;
    width:100%;
    position:relative;
    position:fixed;
    top:0px;
}

#profile-pic-bg{
    position:abosolute;
    top:2px;
    left:20px;
    background:red;
    z-index:99999;
    height:100px;
    width:100px;
}

JavaScript

$( window ).scroll(function() {
     if($(window).scrollTop() > 200){
       
        $("#profile-pic-bg").css({ 
            "position": "absolute", 
            "top": "20px", 
            "left":"5px" ,
            "width":'50px'
        });
     }else{
         $('#profile-pic-bg').css({'width': '145px'});
     }

});