JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<body class="lock">
<div id="header">
</div>
<div id="hoe">
</div>
<div id="een">
</div>
</body>
</html>

CSS

#header
{
background-color: blue;
width: 100%;
height: 125px;
}

#hoe
{ 
background-color: red;
height: 180px;
width: 100%;
z-index: 9999;
top: 125;
position: fixed;
}

#een
{
margin-top: 180px;
background-color: green;
height: 700px;
width: 100%;
}

JavaScript

$(window).scroll(function() {
    if ($('body').hasClass('lock')) {
        bar_pos = $('#hoe').offset();
        if (bar_pos.top >= (125+180)) {
            $('#hoe').css('top', 0);
            //document.getElementById("hoe").style.top="0"; also tried this
        }
    };
});