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).scroll(function () {
                    var height = $('body').height();
                    var scrollTop = $(window).scrollTop();
    
                      if(scrollTop>500){
                          $('#header').css({ 'position': 'fixed', 'top' : '0' });
                    } 
    else{
        $('#header').css({ 'position': 'relative', 'top': '500px'});
    }
                });