JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <span onclick="$('body').removeClass().addClass('sec1')">scroll 1</span>
  <span onclick="$('body').removeClass().addClass('sec2')">scroll 2</span>
  <span onclick="$('body').removeClass().addClass('sec3')">scroll 3</span> 
  <span onclick="$('body').removeClass().addClass('sec4')">scroll 4</span> 
</header>
<div class="skybox">
  <div class="sky">
    <div style="height:100vh; padding:100px;">sky part 5</div>    
    <div style="height:100vh; padding:100px;">sky part 4</div>    
    <div style="height:100vh; padding:100px;">sky part 3</div>    
    <div style="height:100vh; padding:100px;">sky part 2</div>    
    <div style="height:100vh; padding:100px;">sky part 1</div>    
  </div>
</div>
<div class="viewport">
  <div class="viewport-content">
    im content in top of the sky yeahhh...ö
  </div>
</div>

SCSS

body, html {
  height:100%;
  width:100%;
  overflow:hidden;
}
* { box-sizing:border-box; }

header {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:#fff;
  z-index:100;
}

.skybox {
    //height: 100%;
    z-index: 1;
    //width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    
    .sky {
      height: 500vh;
      width: 100%;
      background: red;
      transform: translateY(-400vh);
      transition: all 0.8s ease-in-out;
    }

}
.sec1 .skybox .sky {
  transform: translateY(-400vh);
}
.sec2 .skybox .sky {
  transform: translateY(-300vh);
}
.sec3 .skybox .sky {
  transform: translateY(-200vh);
}
.sec4 .skybox .sky {
  transform: translateY(-100vh);
}

.viewport {
  width:100%;
  height: 100%;
  position: relative;
  z-index:10;
  text-align:center;
  padding: 50px;
}
.viewport-content {
  background: rgba(255,255,255,0.2);
  margin: 100px auto;
}