JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<div id="mainBar" style="height:20px; border:1px solid red"></div>
<div id="setupBar" style="border:1px solid blue; height:20px; position: absolute; left: 0; right: 0;"></div>
<div style="height:1500px; background-color:#CCCCCC"></div>

JavaScript

var mainBar = document.getElementById("mainBar");
var mainBar_h = mainBar.offsetHeight;

update_pos = function()
    {
        
        if (document.body.scrollTop > mainBar_h )
        {
            setupBar.style.position = "fixed";
            setupBar.style.top = "0";
        }
        else
        {
            setupBar.style.position = "absolute";
            setupBar.style.top = "";
        }
        
    }


document.addEventListener ("scroll", update_pos);