JSFiddle - React, Tailwind, and code Playground

by Juan Carreño

HTML

<div id="header">
<div class="toTop-transparent">

</div>
</div>

CSS

#header {
  height: 2000px;
}

JavaScript

var header = document.getElementById('header');
var arrow = document.getElementsByClassName('toTop-transparent')[0];
window.onscroll = function () {
    "use strict";    
    if (window.scrollY > 7) {
    		console.log('here 1')
        header.className = 'header-colored';
        arrow.className = 'toTop';
    } else {
    		console.log('here 2')
        header.className = 'header-transparent';
        arrow.className = 'toTop-transparent';
    }
};