JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<div class="wrapper">
  <div class="circle left">1</div>

  <div class="circle right">2</div>
</div>

CSS

body {
  height: 2500px;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  flex-flow: row;
}

.circle {
  display: block;
  width: 100px;
  height: 100px;
  background: black;
  border-radius: 100%;
  position: relative;
  opacity: 0.4;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  color: red;
  font-weight: bold;
}

JavaScript

var between = 0;
var lastScrollTop = 0;

$circle = $(".circle");
$left = $(".left");
$right = $(".right");
$(document).scroll(function() {

  var st = $(this).scrollTop();
  var scrollTop = $(document).scrollTop();
  if (st > lastScrollTop) {
    between += 0.7;
  } else {
    between -= 0.7;
  }
  scrollTop = $(document).scrollTop();
  $left.css({
    left: between + "px",
    top: scrollTop + "px"
  });
  $right.css({
    right: between + "px",
    top: scrollTop + "px"
  });
  lastScrollTop = st;
});