JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="layer down"><div class="inner">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, cum sunt nam temporibus. Repudiandae dolor veritatis ipsum, enim, voluptatibus quas nam odio modi! Blanditiis maiores distinctio, ullam quas cumque? Harum!

</div></div>
<div class="layer middle"><div class="circle"></div></div>
<div class="layer up"><div class="inner">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, cum sunt nam temporibus. Repudiandae dolor veritatis ipsum, enim, voluptatibus quas nam odio modi! Blanditiis maiores distinctio, ullam quas cumque? Harum!

</div></div>

CSS

html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: #003da6;
}

.circle {
  width: 200px;
  height: 200px;
  background-color: white;
  border-radius: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
}

.inner {
  max-width: 200px;
  margin: 0 auto;
  font: 22pt/24pt 'Arial Bold';
}

.layer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  overflow: scroll;
}

.down {
  background-color: #003da6;
  color: black;
}

/* .middle {
  background-color: #003da6;
} */

.up {
  color: #f2c46c;
  mix-blend-mode: difference;
}

JavaScript

$('.layer.up').on('scroll', function() {
  var position = $(this).scrollTop();
  
  $('.layer.down').scrollTop(position);
});