JSFiddle - React, Tailwind, and code Playground

by AshThakur

HTML

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<div class="nice-button">
Nice
</div>
<div class="dropdown">
Nice DROPDOWN
</div>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

CSS

.dropdown{
  position: absolute;
  background: red;
  padding: 10px;
  top: 0;
}

JavaScript

window.onscroll = function() {shady()};
function shady() {
var offsetTop = document.querySelector(".nice-button").offsetTop + 100;
document.querySelector(".dropdown").style.top = offsetTop+'px';

console.log(offsetTop);

}