JSFiddle - React, Tailwind, and code Playground

by stonerdan

HTML

<div id=rectangle>

  <div id="circle">

  </div>

</div>

<div id="paragraph">

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Ac tortor dignissim convallis aenean et tortor. Massa enim nec dui nunc mattis enim ut. Vitae congue eu consequat ac felis donec. Nulla facilisi cras fermentum odio eu feugiat pretium nibh. Amet nulla facilisi morbi tempus iaculis urna id volutpat lacus. Maecenas pharetra convallis posuere morbi leo urna. Pellentesque habitant morbi tristique senectus et netus.

  Sagittis id consectetur purus ut faucibus pulvinar elementum. Condimentum lacinia quis vel eros donec ac odio tempor orci. Iaculis at erat pellentesque adipiscing commodo elit. Vitae ultricies leo integer malesuada nunc vel. Mi proin sed libero enim sed faucibus. Aenean euismod elementum nisi quis. Risus quis varius quam quisque id diam. Tortor condimentum lacinia quis vel eros donec ac. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Magna etiam tempor orci eu.

  Pellentesque massa placerat duis ultricies lacus sed turpis. Commodo elit at imperdiet dui accumsan sit amet nulla. Convallis convallis tellus id interdum velit laoreet id donec ultrices. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Dictum at tempor commodo ullamcorper a lacus vestibulum. Sit amet mauris commodo quis imperdiet. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt eget. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Duis convallis convallis tellus id. Tortor at risus viverra adipiscing. Leo vel orci porta non pulvinar neque laoreet suspendisse. Ut venenatis tellus in metus vulputate eu scelerisque felis.

  Non curabitur gravida arcu ac tortor. Lorem mollis aliquam ut porttitor leo a diam....

CSS

* {
  border: 1px solid transparent;
}

#rectangle {
	border: 1px solid black;
	float: left;
	position: fixed;
	top: 10px;
  width: 100px;
  height: 200px;
	overflow: auto;
	margin-right: 10px;
}

#circle {
  position: fixed;
  top: 50px;
  left: 20px;
  width: 80px;
  height: 80px;
  background: red;
  border-radius: 50%;
	opacity: 0.5;
}

/* #paragraph {
	clear: left;
} */

JavaScript

document.getElementById("rectangle").onmouseover = function() {
	document.getElementById("circle").style.opacity = "1.0";
	document.getElementById("circle").style.width = "80px";
	document.getElementById("circle").style.height = "80px";
}

document.getElementById("rectangle").onmouseout = function() {
if (document.body.scrollTop > 5 || document.documentElement.scrollTop > 5) {
document.getElementById("circle").style.opacity = "0.05";
document.getElementById("circle").style.width = "40px";
document.getElementById("circle").style.height = "40px";
}
else {
document.getElementById("circle").style.opacity = "0.5";
document.getElementById("circle").style.width = "80px";
document.getElementById("circle").style.height = "80px";
}
}

window.onscroll=function() {onScroll()};

function onScroll() {
if (document.body.scrollTop > 5 || document.documentElement.scrollTop > 5) {
document.getElementById("circle").style.width = "40px";
document.getElementById("circle").style.height = "40px";
document.getElementById("circle").style.opacity = "0.05";
}


else {
document.getElementById("circle").style.width = "80px";
document.getElementById("circle").style.height = "80px";
document.getElementById("circle").style.opacity = "0.5";
}
}