JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<div id="block">Lorem ipsum dolor sit amet.</div>

CSS

body{
  height:2000px;
}
#block{
  position:fixed;
  height:100px;
  width:100px;
  background:red;
  padding:10px;
}

JavaScript

var b = document.querySelector("#block");

document.addEventListener("scroll",function(e){
	var yC = window.innerHeight/2-b.offsetHeight/2;
  var xC = window.innerWidth/2-b.offsetWidth/2;
  var radius = 150;
	var angle = (window.pageYOffset || document.documentElement.scrollTop)/(document.body.scrollHeight-window.innerHeight)* (Math.PI*2);
  b.style.left = xC + radius*Math.cos(angle)+"px";
  b.style.top = yC + radius*Math.sin(angle)+"px";
  
},false);
document.dispatchEvent(new Event("scroll"));