JSFiddle - React, Tailwind, and code Playground

HTML

<header> This is the header </header>

CSS

body {
    height:2000px;
}
header {
    width:100%;
    padding:20px;
    background:orange;
    position:fixed;
}

.lower-opacity {
    opacity:0;
}

JavaScript

var header = $('header');
$(window).scroll(function() {
    header.addClass('lower-opacity');
    if($(this).scrollTop() === 0) {
        header.removeClass('lower-opacity');
    }
});