JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width:100%;">
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />

    <div id="navbar">
    Hello, This is the Fixed Navbar
    </div>
    
<p style="top:100px; position:relative">
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text .. Text .. Text .. <br />
Text .. Text .. Text...

CSS

#navbar{
    position:absolute;
    text-align:center;
    width:100%;
    height:50px;
    min-height:50px;
    top:50px;
    color: #fff;
    background:#000;
}

JavaScript

$(window).scroll(function () {
    var height = $('body').height();
    var scrollTop = $(window).scrollTop();
    console.log(scrollTop);
    if(scrollTop>50){
        $('#navbar').css({ 'position': 'fixed', 'top' : '0', 'opacity': '0.5'});
    } else {
         $('#navbar').css({ 'position': 'absolute', 'top': '50px', 'opacity': '1'});
    }
});