JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="header" class="header">
<div class="logo"><img src="source.png"></div>
<div class="logo_bg"></div>
</div>



<p>test</p>
<p>test</p>
<p>https://vecta.io/nano</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p><p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>

CSS

body {margin:0;}
.header {position:fixed;top:0;left:0;width:100%;background-color: #ffffff;height:80px;transition:all 0.5s ease;}
.header2 {position:fixed;top:0;left:0;width:100%;background-color: #DEAA39;height:80px;transition:all 0.5s ease;}

.header .logo_bg {position:absolute;top:0;left:0;width:169px;height:100%;background-image:url('source.png');background-repeat:no-repeat;opacity:0;}
.header2 .logo_bg {position:absolute;top:0;left:0;width:169px;height:100%;background-image:url('source.png');background-repeat:no-repeat;opacity:1;}
.header .logo {position:absolute;top:0;left:0;width:169px;height:100%;opacity:1;}
.header2 .logo {position:absolute;top:0;left:0;width:169px;height:100%;opacity:0;}

JavaScript

window.onscroll = function() {myFunction()};

function myFunction() {
  if (document.documentElement.scrollTop > 150) {
    document.getElementById("header").className = "header2";
  } else {
    document.getElementById("header").className = "header";
  }
}