JSFiddle - React, Tailwind, and code Playground

by Alin Guta

HTML

<div id="blank-content"></div>
<div id="anchor"></div>
   <div id="header">
       <p>YOUR MENU IS HERE AND WILL CHANGE COLOR WHEN STICKS TO TOP ON SCROLL</p>
   </div>

CSS

#blank-content {
    width: 100%;
    height: 180px;
    background-color: #ebebeb;
    position: relative;
}
#header {
width: 100%;
height: 80px;
background-color: #000;
left:0;
right: 0;
position: relative;

}
p{
    color: white;
    width: 80%;
    margin:0 auto;
    
}
body {
height: 7000px;
width: 100%;
float: right;}

JavaScript

$(function() {
    var move = function() {
       var st = $(window).scrollTop();
        var ot = $("#anchor").offset().top;
        var s = $("#header");
       if(st > ot) {
            s.css({
                position: "fixed",
                top: "0px"

            });
        } else {
            if(st <= ot) {
                s.css({
                    position: "relative"
                });
            }
        }
    };
    $(window).scroll(move);
    move();
});