JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
<div id="kod">
  
</div>
    
</div>
<div id="sidebar">
    
</div>

CSS

#content {
    width: 100%;
    height: 500px;
    background-color: #cf0;
    position: relative;
    overflow: auto;
}
#kod {
  width: 50px;
  height: 50px;
      background-color: #000;
position: absolute;
left: 50%;
top: 50%;
}

JavaScript

$(function(f){
    var element = f('#kod');
    f(window).scroll(function(){
        element['fade'+ (f(this).scrollTop() > 10 ? 'In': 'Out')](100);           
    });
});