JSFiddle - React, Tailwind, and code Playground

HTML

<div class="teste"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="scroll">
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
    Scroll<br />
</div>

CSS

#scroll {
    overflow: auto;
}
.teste {
  background:red;
  height:300px;
}

JavaScript

var div = $('#scroll');
$(document).on( 'scroll', function(){
if (div.scrollTop() == 0){
	div.css('background' , 'yellow');
}
else {
	div.css('background' , 'blue');
}
});