JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugiat eveniet nobis est suscipit saepe quibusdam sequi ratione repellat velit tempora minima obcaecati assumenda dignissimos quas omnis soluta neque consectetur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugiat eveniet nobis est suscipit saepe quibusdam sequi ratione repellat velit tempora minima obcaecati assumenda dignissimos quas omnis soluta neque consectetur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugiat eveniet nobis est suscipit saepe quibusdam sequi ratione repellat velit tempora minima obcaecati assumenda dignissimos quas omnis soluta neque consectetur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugiat eveniet nobis est suscipit saepe quibusdam sequi ratione repellat velit tempora minima obcaecati assumenda dignissimos quas omnis soluta neque consectetur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugiat eveniet nobis est suscipit saepe quibusdam sequi ratione repellat velit tempora minima obcaecati assumenda dignissimos quas omnis soluta neque consectetur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugiat eveniet nobis est suscipit saepe quibusdam sequi ratione repellat velit tempora minima obcaecati assumenda dignissimos quas omnis soluta neque consectetur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugiat eveniet nobis est suscipit saepe quibusdam sequi ratione repellat velit tempora minima obcaecati assumenda dignissimos quas omnis soluta neque consectetur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugiat eveniet nobis est suscipit saepe quibusdam sequi ratione repellat velit tempora minima obcaecati assumenda dignissimos quas omnis soluta neque consectetur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugiat eveniet nobis est suscipit...

CSS

* {
  margin: 0px;
  padding: 0px;
  font-family: "Lato", Helvetica, Arial, sans-serif;
  color: #fff;
  -webkit-text-stroke: 0.35px;
  -webkit-font-smoothing: antialiased;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background: #3666B1;
}

JavaScript

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
       
   } else {
      // upscroll code
   }
   lastScrollTop = st;
});