JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div style="height: 30vh;"></div>
<div class="body">
  <div class="box">
    <div class="stick"></div>
  </div>
</div>
<div style="height: 200vh; position: relative; background: white;"></div>

CSS

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
div.body {
  width: 100%;
  height: 200vh;
  position: absolute;
  /* background: url(https://picsum.photos/id/532/1920/1080) no-repeat; */
  background-size: cover;
  background: red;
  background-position: center;
}
div.body div.box {
  width: 100%;
  height: 50%;
  top: 0;
  left: 0;
  position: relative;
}
div.body div.box div.stick {
  width: 100%;
  height: 100%;
  position: sticky;
  top: 0;
  background: url(https://picsum.photos/id/118/1930/1081) no-repeat;
  background-size: cover;
  background-position: center;
}