JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body {
    height: 1000px;
}
.head {
    position: relative;
    top: 100px;
    width: 100%;
    height: 50px;
    background: none;
}
.head + .head {
    top: 110px;
}
.head.small {
    background: #000;
}

JavaScript

window.onscroll = function () {
    var el = document.getElementsByTagName('header');
    var className = 'small';
    for (var i = 0; i < el.length; i++) {
        if (el[i].classList) {
            if (window.scrollY > 80) el[i].classList.add(className);
            else el[i].classList.remove(className);
        } else {
            // IE Fix
            if (window.scrollY > 80) el[i].className += className;
            else el[i].className = str.replace(new RegExp("\\b" + className + "\\b", "gi"), "");
        }
    }
}