JSFiddle - React, Tailwind, and code Playground

by Petra1999

HTML

<div class="container">

<div class="header unsticky" id="myHeader">
<div class="x">
  <div class="navi">
    <a href="#">home</a>
    <a href="#">ask</a>
    <a href="#">navi</a>
  </div>
</div><div class="y"></div>
</div>

<div class="content">
ablsdfkljsdklfjdskf<br>
shfkdsjfkldjf<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
</div>

<div style="margin-top:1000px;">.</div>

</div>

CSS

.container {
  margin-top:69px;
  width:500px;
  border:1px solid red;
}

.content {
  background-color:lightblue;
  text-align:center;
  padding:30px;
  width:400px;
  box-sizing:border-box;
}


.x, .y {
  background-color:#FCE200;
  width:400px;
  height:50px;
}

.x {
  z-index:2;
}

.y {
  z-index:1;
  margin-top:-50px;
}

.navi a {
  color:black;
  text-decoration:none;
  display:inline-block;
  margin-left:15px;
  font-size:35px;
}

.navi a:first-child{
  margin-left:0;
}

.navi a:hover{
  text-shadow: 1px 0px 0px black;
}

/* ++++++++++++++++++++++++++++++++++ */

.header.unsticky {
  height:350px;
  transition:1s;
}

.header.unsticky .x {
  -webkit-transform: translate(0, 150px) rotate(-45deg);
  -ms-transform: translate(0, 150px) rotate(-45deg);
  transform: translate(0, 150px) rotate(-45deg);
  transition:1s;
}

.header.unsticky .y {
  -webkit-transform: translate(0, 150px) rotate(45deg);
  -ms-transform: translate(0, 150px) rotate(45deg);
  transform: translate(0, 150px) rotate(45deg);
  transition:1s;
}

.header.unsticky .navi {
  display:inline-block;
  position:absolute;
  bottom:0;
  right:30px;
}

/* ++++++++++++++++++++++++++++++++++ */

.sticky {
  position: fixed;
  top: 0px;
}
.header.sticky {
  height:50px;
  transition:1s;
}
.header.sticky .x, .header.sticky .y {
  transform: none;
  transition:1s;
}
.header.sticky .navi {
  text-align:center;
  padding-top:10px;
}


/* ++++++++++++++++++++ */

JavaScript

window.onscroll = function() {
	
  var header = document.getElementById("myHeader");
	var sticky = header.offsetTop;
  
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
    header.classList.remove("unsticky");
  } else {
    header.classList.remove("sticky");
    header.classList.add("unsticky");
  }
  
};