JSFiddle - React, Tailwind, and code Playground

HTML

<header id="header" class="alt">
            <h1><a href="index.html">Company Namez</a></h1>
            <a href="#one">Features</a>
            <a href="#two">About us</a>
            <a href="#three">Team</a>
            <a href="#four">Contact Us</a>
        </header>
        <div>
        
        </div>

CSS

header {
   margin: auto;
   text-align:center;
   background-color: rgba(255, 255, 255, 0);
   position: fixed;
   width: 100%;
}

div{
  height: 4000px;
}

JavaScript

$(document).scroll(function() { 
   if($(window).scrollTop() === 0) {
     $('header').css("background-color", "rgba(255, 255, 255, 0)")
   }
   else {
   	 $('header').css("background-color", "rgba(255, 255, 255, 1)")
   }
});