JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    <ul>
        <li>Menu 1</li>
        <li>Menu 2</li>
        <li>Menu 3</li>
        <li>Menu 4</li>
     </ul>
</div>

CSS

body{
    min-height:1000px;
}
#header{
    position: fixed;
    margin:30px;
}
#header ul{
    display:block;
}
#header ul li{
    float:left;
    list-style-type:none;
    width:110px;
    text-align:center;
    line-height:30px;
    padding-bottom:3px;
    background: yellow;
}

JavaScript

$(window).resize(function() {
    if (this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

$(window).bind('resizeEnd', function() {
    var header = $("#header");
    header.css({
        position: "absolute",
        top: "0px",
        left: "0px"
    });
});