JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu-placeholder">
    <div class="menu">
        Menu
    </div>
</div>
<div class="content">
    Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />Very long content<br />
</div>

CSS

.menu-placeholder {
    padding-top: 64px;
    height: 128px;
    background: gray;
}
.menu {
    width: 80%;
    margin: 0px 10%;
    display: block;
    background: red;
    height: 64px;
}

.menu.floating {
    position: fixed;
    top: 0;
    left: 0%;
    margin: 0;
    width: 100%;
}

JavaScript

$(window).scroll(function() {
    if($(this).scrollTop() > 64) {
        if(!$('menu').hasClass('floating')) {
           $('.menu').addClass('floating');
        }
    } else {
        $('.menu').removeClass('floating');
    }
});