JSFiddle - React, Tailwind, and code Playground

HTML

<div id="image"></div>
<div id="scroll"></div>

CSS

#image {
    width: 200px;
    height: 1000px;
    background: red;
}

#scroll {
    position: fixed;
    top: 0;
    right: 0;
    width: 100px;
    height: 300px;
    overflow: auto;
    background: yellow;
}

JavaScript

$(function () {
    $(window).scroll(function(){
        var scrollYpos = $(document).scrollTop();
        
        $('<div>').text(scrollYpos).prependTo('#scroll');
        
        if(scrollYpos > 100 && scrollYpos < 200){               
            fade_out_img(5000);
        }
        else{
            fade_in_img();
        }
    });
    
    function fade_out_img(){
        $("#image").stop().fadeTo('slow', 0.1);
    }
    
    function fade_in_img(){
        $("#image").stop().fadeTo('slow', 1.0);
    }
});