JSFiddle - React, Tailwind, and code Playground

by kamalo

HTML

<header>Top Navigation</header>
<div id="home"></div>
<div id="about"></div>
<div id="work"></div>
<div id="contact"></div>

CSS

div {
    height:1000px;
    width:100%;
}
#home  {
    background-color:red;
}
#about {
    background-color:green;
}
#work {
    background-color:blue;
}
#contact {
     background-color:orange;   
}
header {
	background-color: #520833;
	height: 100px;
	position:fixed; 
	width:100%; 
	top:0;
	z-index:100;
}

JavaScript

var t = $('#about').offset().top - 100;

$(document).scroll(function(){
    if($(this).scrollTop() > t)
    {   
        $('header').css({"background-color":"green"});
    } 
});