JSFiddle - React, Tailwind, and code Playground

by HA3IK

HTML

<div id="newWrap">
    <div id="header">
        <div class="forHeader">
            <ul>
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
                <li>Four</li>
                <li>Five</li>
                <li>Sex</li>
                <li>Seven</li>
                <li>Eight</li>
            </ul>
        </div>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    height: 100%;
}
#newWrap {
    width: 100%;
    min-width: 1200px;
    height: 100%;
    border: 1px solid red;
    background: #eaeaea;
}
#header {
    position: fixed;
    width: auto;
    min-width: 1200px;
    height: auto;
    border: 1px solid black;
    background: #aeaeae;
}
.forHeader {
}
ul {
    height: 50px!important;
    outline: 1px solid blue;
}
li {
    display: inline-block;
    margin: 10px 20px;
    border-right: 1px solid black;
}

JavaScript

function hscrollbar() {
    var left = window.pageXOffset ? window.pageXOffset : document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft;

    document.getElementById('header').style.left = -left + "px";
}
window.onscroll = hscrollbar;
window.onresize = hscrollbar;