JSFiddle - React, Tailwind, and code Playground

HTML

<div id="start">
  <h1>start</h1>
</div>

<div id="one">
  <div class="sticky">
    <h1>one</h1>
  </div>  
</div>

<div id="two">
  <h1>two</h1>
</div>

<div id="three">
  <div class="sticky">
    <h1>Three</h1>
  </div>  
</div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
  color: #000;
  font: bold 20vw Helvetica, Arial, sans-serif;
}

.sticky {
  position: sticky;
  top: 0px;
}

#start {
  width: 100%;
  height: 50vh;
  background: #fff;
}

#one {
  height: 100vh;
  width: 100%;
  background: #00f;
}

#two {
  width: 50%;
  position: relative;
  height: 100vh;
  background: #fff;
}

#three {
  width: 100%;
  height: 100vh;
  background: #f00;