JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header"></div>
<div id="hoe"></div>
<div id="een"></div>

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

$(document).ready(function () {
    var bar_pos;
    $(window).scroll(function (e) {
        if ($('body').hasClass('lock')) {
            bar_pos = $('#hoe').offset();
            if (bar_pos.top >= (125 + 180)) {
                $('#hoe').css('top', 0);
            }
            else{
                $('#hoe').css('top', 125);
            }
        };
    });
});