JSFiddle - React, Tailwind, and code Playground

by uiwwnw

HTML

<div id="content">
  <div>
    <div class="fff">aaaa</div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, porro, mollitia. Magni, repudiandae praesentium perferendis quis fuga officiis doloribus aut a inventore cumque. Deleniti voluptas amet, dicta dolor suscipit facilis perspiciatis laudantium,
    numquam beatae in non? Consequuntur beatae nesciunt, optio cumque sunt, qui ipsa esse dolore, itaque, odio soluta. Culpa autem beatae distinctio ducimus quibusdam ipsam a, consectetur dolorum ut sequi cumque odit placeat, temporibus, nihil blanditiis
    rerum. Totam nobis fuga commodi porro dolores magnam deleniti debitis nisi ipsam fugit suscipit vero, alias asperiores quibusdam magni voluptatem odit vel obcaecati minus repudiandae a ullam ipsa architecto quos? Sint nemo nihil nam quod rerum qui
    possimus ipsum eum, vero voluptate corporis neque minus asperiores tempore, quasi doloribus veritatis fugit delectus facere dolorem assumenda laudantium natus. Molestiae fugiat laudantium non quis impedit dolores veritatis, atque facere temporibus,
    quia, quibusdam est, nobis esse illum aperiam. Soluta, dolorum, distinctio praesentium odio deleniti explicabo voluptatibus ab porro totam dicta ea quisquam? Facilis dolor esse tempora iusto omnis beatae, quo obcaecati deleniti vitae, qui repudiandae?
    Sit accusamus odio amet tempore dignissimos harum consequatur, odit sunt dolores optio, hic porro sed impedit soluta quae quod tenetur inventore esse. Qui velit, alias esse iure! Error at doloribus in maxime aperiam. Id tempore, enim consequuntur.
    Ipsam consectetur tenetur eos eaque excepturi ex laboriosam cupiditate ratione minima et voluptas fugiat architecto quaerat asperiores, voluptatibus fuga magni! Mollitia ipsum itaque voluptate amet ducimus quos maxime impedit error temporibus eius,
    quidem minus dignissimos debitis excepturi doloremque veniam necessitatibus! Ad error sit eaque iure laborum pariatur perferendis, dolore magni...

SCSS

.fff {
  position: fixed;
  top: 0;
  color: red;
  transition: 1s top ease-out;
  width: 300px;
  height: 300px;
  background: #000;
  
  .up & {
      transition: .7s top ease-in;
  }
   
  .down & {
      transition: .7s top ease-in;
  }
}

JavaScript

var stt;
var sti;
window.onscroll = function(e) {
  var a = this.oldScroll > this.scrollY === true ? 'up' : 'down';
  var s = this.oldScroll - this.scrollY === undefined ? 0 : this.oldScroll - this.scrollY;
  var e = document.querySelectorAll('.fff');
  console.log(s);

  for (var i = 0; i < e.length; i++) {
    e[i].setAttribute('style', 'top: ' + s * 10 + 'px;')
  }
  document.getElementById('content').setAttribute('class', a);
  this.oldScroll = this.scrollY;
  clearTimeout(stt);
  stt = setTimeout(function() {
    aaa();
  }, 50)
}

function aaa() {
  document.getElementById('content').removeAttribute('class');
  var e = document.querySelectorAll('.fff');
  for (var i = 0; i < e.length; i++) {
    e[i].removeAttribute('style')
  }
}