JSFiddle - React, Tailwind, and code Playground

HTML

<body id="top">
<wrapper 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> Pierre Busserolles et Léa Clidassou © All right reserved
  </h1>
  </footer>

CSS

</script>

<style type="text/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;
	
}
#wrapper #header {
	background-color: #CCC;
	height: 50px;
	width: 100%;
	margin-top: 10%;
	position:relative;
    z-index:3;
}

#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; 
}

</style>

JavaScript

$(function(){
   $(window).scroll(function () {//Au scroll dans la fenetre on déclenche la fonction
      if ($(this).scrollTop() > 160) { //si on a défilé de plus de 160px du haut vers le bas
          $('header').addClass("fixe"); //on ajoute la classe "fixe" au header
      } else {
      $('header').removeClass("fixe");//sinon on retire la classe "fixe" (c'est pour laisser le header à son endroit de départ lors de la remontée
      }
   });
 });