JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div style="height: 20vh;"></div>
<div class="box"></div>
<div class="box_1"></div>
<div style="height: 20vh;"></div>

CSS

div.box {
  width: 40%;
  height: 300vh;
  position: relative;
  display: inline-block;
  background: url(https://picsum.photos/1200) no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
div.box_1 {
  width: 40%;
  height: 100vh;
  position: sticky;
  top: 0;
  display: inline-block;
  background: url(https://picsum.photos/1200) no-repeat;
  background-size: cover;
  /* background-attachment: fixed; */
}
div.img {
  width: 50%;
  height: 33.3%;
  background: url(https://picsum.photos/1200) no-repeat;
  background-size:cover;
  position: sticky;
  top: 0;
}
div.img .img_1 {
  position: sticky;
  top: 0;
}