JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bar" style="width: 500px; height:90px; background:gray;"></div>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>

CSS

#bar {position:fixed;}
[scroll] {box-shadow:0 0 5px red;}

JavaScript

window.onscroll=problem(this.pageYOffset);
function problem(val) {
  var bar=document.getElementById('bar');
    console.log('Scroll: '+val);
    if(val>10){bar.setAttribute('scroll');}
    else {bar.removeAttribute('scroll');}
}