JSFiddle - React, Tailwind, and code Playground

by hansenmc

HTML

<div id="navbar" class="navbar_absolute">Navigation Bar</div>
<div style="height:2000px;background-color:#ff0;">Content</div>

CSS

html,body {
  margin: 0;
}
#navbar.navbar_fixed {
  position:fixed;
  top:0px;
  width:100%;
  height:100px;
  background-color:#f00;
}
#navbar.navbar_absolute {
  position:absolute;
  top:100px;
  width:100%;
  height:100px;
  background-color:#f00;
}

JavaScript

function window_onload() {
  window.addEventListener("scroll",navbar_reset_top,false);
}
$(document).ready(function(){
 window_onload();
});

var navbar_top=100;

function navbar_reset_top() {
  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
  if(scrollTop>navbar_top&&navbar.className==="navbar_absolute") {
    console.log("absolute");
    document.getElementById("navbar").className="navbar_fixed";
  }
  else if(scrollTop<navbar_top&&navbar.className==="navbar_fixed") {
      console.log("fixed");
    document.getElementById("navbar").className="navbar_absolute";
  }
   // console.log("!");
}