JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div id="header-ovr"></div>
<div id="one"></div>
<div id="two"></div>

CSS

#header-ovr{
    display:block;
    top:10px;
    position:fixed;
    left:10px;
    display:block;
    height:50px;
    width:50px;
    background:#333;
}
#header-ovr.top{
    background:blue;
}
#one{
    position:absolute;
    top:1500px;
    left:0px;
    width:10px;
    height:10px;
    background:#ccc;
}
#two{
    position:absolute;
    top:3000px;
    left:0px;
    width:10px;
    height:10px;
    background:#ccc;
}

JavaScript

var top = $('#header-ovr').offset().top - parseFloat($('#header-ovr').css('margin-top').replace(/auto/, 0));
 $(window).scroll(function (event){
   var y = $(this).scrollTop();
     
     var header = $('#header-ovr').offset().top - y,
         onePos = $("#one").offset().top - y;

     if(header > onePos){
        $('#header-ovr').addClass("top");
     } else{
        $('#header-ovr').removeClass("top");
     }
 });