JSFiddle - React, Tailwind, and code Playground

HTML

<body id="top">

    <div id= "wrapper">
    
      <div id= "dataflow">
      <img src="Images/logo dataflow.png" >
      </div>
    
    
            <header id = "header">
          
                 <ul id="nav"><!-- 
                    --><li><a href="#">Designer</a></li><!-- 
                    --><li><a href="#">Index</a></li><!-- 
                    --><li><a href="#">Contact</a></li>  
                </ul>  
            
            </header>
    
            <section id ="cotent">
            <div></div>
            </section>
            
      <footer id = "footer">
      <h1> copiright © All rights reserved
      </h1>
      </footer>
             
    </div>

</body>

CSS

body {
	background-image: url(Images/motif%20de%20fond.png);
	background-repeat: repeat;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 100px;
	background-attachment:fixed;
	
}
wrapper {
	background-color: #F6F6F6;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	height: 100%;
	margin-top: 100%;
}
#dataflow {
	margin-right: auto;
	margin-left: auto;
	width: 80%;
	margin-top: 250px;
	height: 387px;

}
#dataflow img {
	width: 75%;
	position:fixed;
	z-index:1;
	margin:auto;
    
	}
#wrapper #cotent {
	background-color: #999;
	height: 900px;
	width: 100%;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	position:relative;
    z-index:2;
	
}

#header {
	background-color: #CCC;
	height: 50px;
	width: 100%;
	margin-top: 10%;
	position:relative;
    z-index:3;
}

#header.fixed {position:fixed;width:100%;top:0;left:0;margin-top:0;}

#wrapper #footer {
	font-size:5px;
	margin:auto;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	text-decoration: none;	
}

       #nav {
	padding: 0;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}  

#nav li {  
    display: inline;  
    list-style: none; 
	 
}  
#nav a {  
    display:inline-block;  
    margin: 20px 180px; 
	text-decoration: none;
	color: #000; 
}

#nav a:hover {
	display:inline-block;
	text-decoration: none;
	border: 2px solid #000;
	padding: 6px;
	margin: auto 171.99px; 
}

JavaScript

var header = document.getElementById("header");

function scrolled(){
	header.className = (window.pageYOffset >= document.documentElement.clientHeight) ? "fixed" : "";
}

addEventListener("scroll", scrolled, false);