JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <div height="100"></div>
</header>
<div id="header">
    <ul>
        <li>Home</li>
        <li>About</li>
    </ul>
</div>
<div class="content"></div>

CSS

html, body {
        height:150%;
    }
    body {
        margin: 0;
        padding: 0;
    }
    #header {
        width:900px;
        height:100px;
        background-color:#FFF;
        margin-left:auto;
        margin-right:auto;
        border-top:1px;
        border-top-color:#D2D2D2;
        border-top-style:solid;
        border-bottom:1px;
        border-bottom-color:#D2D2D2;
        border-bottom-style:solid;
    }
    header {
        background-color:#FFF;
        width:900px;
        margin-left:auto;
        margin-right:auto;
        text-align:center;
    }
    .content {
        width:900px;
        margin-left:auto;
        margin-right:auto;
    }
    #header ul {
        list-style:none;
    }
    #header ul li {
        display:inline;
        padding:10px;
    }

JavaScript

$(function () {
        var HeaderTop = $('#header').offset().top;
        $(window).scroll(function () {
            if ($(window).scrollTop() > HeaderTop) {
                $('#header').css({
                    position: 'fixed',
                    top: '0px',
                    left:'50%',
                    marginLeft: '-450px'
                });
            } else {
                $('#header').css({
                    position: 'relative',
                    top: '0px'
                });
            }
        });
    });