JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav" class="cf"></div>
<div id="chase"></div>

CSS

body{
}
div#nav{
    display:block;
    width:100%;
    height:60px;
    position:fixed;
    top:0;
    left:0;
    background:#222;
    opacity:.3;
}
div#nav.lightsOut{
    opacity:.8;
}
div#chase{
    display:block;
    height:2000px;
    width:10px;
}

JavaScript

$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    
    if (scroll >= 100) {
        $("#nav").addClass("lightsOut");
    } else{
        $("#nav").removeClass("lightsOut")
    }
    
});