JSFiddle - React, Tailwind, and code Playground

by drewP

HTML

<div id="parent">
    <div id="offset">
        <p>
            X: <span id="offsetX"></span>
        </p>
        <p>
            Y: <span id="offsetY"></span>
        </p>
        
        <div id="fadeElement">
            
        </div>
    </div>
    
    

</div>

CSS

div#parent {
 height: 4000px; width: 4000px;   
}

div#offset{
 float:left;
 position: fixed;   
}

div#fadeElement {
 background-color: #234561;
 height: 200px; width: 200px;    
}

JavaScript

$(function(){ 
    $(window).scroll(function(){
       var self = $(this);
       var y = self.scrollTop();
       var x = self.scrollLeft();
  
       $("#offsetX").html(x);
       $("#offsetY").html(y);
        
        if(x > 740 && x <1481) {
            $("#fadeElement").fadeOut();
        }
        else {
             $("#fadeElement").fadeIn();
        }
    });
});