JSFiddle - React, Tailwind, and code Playground

by nickadeemus2002

HTML

<div class="wrapper">
  <div id="clickMe">
    Click Me 
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

CSS

.wrapper {
  margin: 10px 1000px 1000px 100px;
  width: 2500px;
  height: 2500px;
  border: 1px solid #000;
}

.wrapper #clickMe {
  width: 70px;
  height: 18px;
  background-color: lime;
  margin: 1000px 0 1200px 100px;
  cursor: pointer;
  position: relative;
}

.wrapper #clickMe ul {
    width: 100%;
    padding: 0 0 0 20px;
    margin: 0;
}

.openBottom ul {
  position: absolute;
  top: 17px;
}

.openTop ul {
  position: absolute;
  bottom: 17px;
}

JavaScript

document.getElementById("clickMe").addEventListener("click", function (e) {
  	var rect = e.target.getBoundingClientRect();
    var winHeight = window.innerHeight;
    var flyHeight = e.target.children[0].offsetHeight;
    var faceHeight = e.target.offsetHeight;
    var overHang = flyHeight + faceHeight + 20;
    
    console.log(flyHeight);
    console.log(faceHeight);
   	console.log(rect.top, rect.right, rect.bottom, rect.left);
    console.log(winHeight);
    console.log(overHang);
    console.log(winHeight - (rect.top + overHang));

    
    if(winHeight - (rect.top + overHang) > 0) {
    	e.target.className = "openBottom";
    }
    else {
			e.target.className = "openTop";
		}
	});