JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<header id="header">heaeder</header>
<div id="block2">
    
</div>
<div id="block">
    <div id="clearHeader"></div>
</div>
<div id="wrapper">
</div>

CSS

header{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    height: 50px;
    background: lightgreen;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    line-height: 50px;
}

#block2{
    display: block;
    position: relative;
    clear: both;
    width: 100%;
    height: 500px;
    top: 100px;
    border-bottom: 2px solid #333;
}

#block{
    display: block;
    position: relative;
    clear: both;
    width: 100%;
    height: 500px;
    top: 100px;
    border-bottom: 2px solid #333;
}

#clearHeader{
height: 200px; 
background-color: rgba(107,107,107,0.66);
position: absolute;
top:200px;
width: 100%;
}

#clearHeader.darkHeader {height: 100px; position: fixed; top:50px; left: 0;}

#wrapper {
height:4000px;
}

JavaScript

var static = document.getElementById("clearHeader");
var stop = (static.offsetTop - 60);

window.onscroll = function (e) {
    var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
    console.log(scrollTop, static.offsetTop);
    // left.offsetTop;

    if (scrollTop >= 750) {    //&& scrollTop <= 1500
        static.className = 'darkHeader';
    } else {
        static.className = '';
    }

}