JSFiddle - React, Tailwind, and code Playground

HTML

<header id='header' class='head'></header>

CSS

body {
    height: 500px;
}

.head {
    width: 100%;
    height: 50px;
    background: #321;
    position:fixed;
}


.head.small {
    background: #999;
}

JavaScript

window.onscroll = function() {
  var className = 'small';
  var el = document.getElementById('header');

  if (el.classList) {
    if (window.scrollY > 90)
      el.classList.add(className);
    else
      el.classList.remove(className);
  } else {
    if (window.scrollY > 90)
      el.className += className;
    else
      el.className = str.replace(new RegExp("\\b"+className+"\\b","gi"),"");
  }
}