JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <div id="drawer"></div>
        <div id="content">
            <header>
                <img id="menu" src="/img/threelines.png">
                <img id="logo" src="/img/threelines.png">
                <img id="cart" src="/img/flat-icon-cart.png">
            </header>
            <main>
                <p>Click the top left broken image to open menu</p>
                <p>Then scroll the page and watch the header element disappear</p>
            </main>
        </div>
    </body>

CSS

html, body {
    position: relative;
    font: 14px"Lucida Grande", Helvetica, Arial, sans-serif;
    padding: 0px;
    margin: 0px;
    height: 100%;
    overflow-x: hidden;
}
#drawer {
    position: fixed;
    z-index: 10;
    width: 70%;
    height: 100%;
    left: 0;
    background: #2E2300;
}
#content {
    position: relative;
    z-index: 20;
    background: white;
    -webkit-transition: 0.4s cubic-bezier(.86, 0, .07, 1);
    /* EaseInOutQuintic */
    -moz-transition: 0.4s cubic-bezier(.86, 0, .07, 1);
    transition: 0.4s cubic-bezier(.86, 0, .07, 1);
}
#content[open] {
    -webkit-transform: translate(70%, 0);
    -mox-transform: translate(70%, 0);
    -ms-transform: translate(70%, 0);
    transform: translate(70%, 0);
}
header {
    position: fixed;
    z-index: 30;
    top: 0;
    width: 100%;
    height: 5em;
}
header img {
    position: absolute;
    height: 3em;
    padding: 0.05em;
    margin: 0.45em;
    border-radius: 50%;
}
header img:active {
    background-color: grey;
}
#menu {
    left: 0;
}
#logo {
    left: 50%;
    transform: translate(-50%, 0);
}
#cart {
    right: 0;
}
main {
    position: relative;
    z-index: 20;
    height: 100%;
    height: 1000px;
    padding-top: 200px;
}
main p {
    margin: 0 auto;
}

JavaScript

$(document).ready(function(){

	$("#menu").click(toggle);

	function toggle(){
		var open = $("#content").attr("open") ? false : true;
		$("#content").attr("open", open);
	}
});