JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container"><div id="header" class="header">Hello World</div></div>

CSS

.container{
    height:2000px;
    width:100%;
    background-color:yellow;
    
}

.header{
    text-align:center;
    background-color:red;
    height:100px;
    position:relative;
    min-height:50px;
    width:100%;
    top:500px;
}

JavaScript

window.onscroll=function () {
    var top = window.pageXOffset ? window.pageXOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
    var head = document.getElementById("header")
    if(top > 550){
        head.style.position = "fixed";
        head.style.height="50px"
        head.style.top="0px"
        }
        else {
if(head.getAttribute("style"))
    head.removeAttribute("style")                
        }
}