JSFiddle - React, Tailwind, and code Playground

HTML

<div class="biglogo2">
        <img src="https://www.fine-s.fr/9959/test.jpg" />
    </div>

CSS

.biglogo2 {
position: fixed; /* want to see this */
width:80%;
display:block;
margin-left:auto;
margin-right:auto;
margin-top:130px;
margin-bottom:130px;
opacity:1;
}

/* just making the page scrollable*/
body, html{
height:200%;
}

JavaScript

$(function(){
    var fadeBegin = 0, 
    fadeFinish = 800, 
    fadingElement = $('.biglogo2');

$(window).on('scroll', function(){
    var offset = $(document).scrollTop(), opacity = 0; 
    console.log(offset);
    if( offset <= fadeBegin ){
        opacity = 1; 
    } else if( offset <= fadeFinish ){
        opacity = 1 - offset / fadeFinish;

    }
    fadingElement.stop().animate({opacity: opacity}, 200);
});
    
    });