JSFiddle - React, Tailwind, and code Playground

by Lestrae

HTML

<div>
<span id='fix'>lalala</span>
</div>

CSS

div {
  height:1000px;
}

#fix {
  background:black;
  color:gold;
}

JavaScript

window.onscroll = function() {
  let prevPosition = 0;
  let currentPosition = window.pageYOffset;
  let stiky = document.getElementById('fix');

  if (prevPosition < currentPosition) {
    stiky.style.position = 'fixed';
    stiky.style.top = '1px';
  } else {
    stiky.style.position = 'relative';
  }
}