JSFiddle - React, Tailwind, and code Playground

HTML

<body>

    <div id="header">lol</div>
    <div id="content"></div>
    http://jsfiddle.net/mzh8an8g/1/#update
</body>

CSS

#content { 
    width: 3000px; 
    background: yellow; 
    position: absolute; 
    height: 100%; 
    top:0; 
    left:0; 
}

JavaScript

var header = $("#header");
$(document).scroll(function() {
    if($(this).scrollLeft() >= window.innerWidth) {
        header.css(
            {
                "display":"",
         "position" : "fixed", 
         "top" : "0", 
         "left" : "0", 
         "width" : "50px", 
                "height" : "50px",
                "background" : "red", 
                "z-index" : "9999"
            }
        );
    } else {
        header.css({"display" : "none"});
}
});