JSFiddle - React, Tailwind, and code Playground

by Luckypouet

HTML

<header>
  <div class="inner">
    Header
  </div>
</header>
<div class="content">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi suscipit modi magnam inventore minus sit, dolor facilis fugit dolore perspiciatis alias atque praesentium laudantium consectetur.</p>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio neque officia laboriosam minus ipsam voluptatibus adipisci illum ullam blanditiis earum, fugit facere harum mollitia autem amet dolorum culpa saepe? Est natus, autem enim aliquid provident officia commodi adipisci quidem ut nisi id nostrum consectetur hic ab voluptas eius laborum! Repudiandae, suscipit at non assumenda perferendis voluptates aliquid commodi iste maiores delectus ducimus vel nobis id unde, nesciunt quo dolores culpa excepturi. Doloribus, praesentium. Laboriosam totam quidem dicta repudiandae, cumque minima a ut quibusdam ducimus voluptatibus animi sit in optio delectus ipsum sequi blanditiis sapiente ea eum, illo odit. Quod deserunt quasi, necessitatibus voluptas in sapiente inventore dolorum, itaque ex voluptatibus similique tempora sunt? Inventore, vero. Minima fuga corporis laborum consequuntur officiis eaque! Repudiandae esse veniam consequatur sed incidunt unde, quasi autem eos. Voluptatibus minus itaque odio dolorum temporibus debitis dicta pariatur nemo dolore quia perferendis quae quisquam maiores, possimus praesentium mollitia ullam qui ipsum dolores alias aspernatur. Eaque quidem recusandae, quibusdam velit laudantium eligendi nisi! Distinctio ipsum reiciendis aliquam iure at. Consequuntur quod unde natus illum! Esse voluptates eligendi repellat dolorem labore quia consequatur! Nemo quidem nisi eveniet amet doloremque sit velit totam doloribus odit sapiente assumenda, quisquam, sint fuga nihil cupiditate dolores inventore molestias illo magni ex aut. Eius illo ducimus ea nihil necessitatibus nam sequi minus fugiat tempora quis hic distinctio fuga accusamus laudantium ipsum voluptatum...

CSS

body, html{
  margin:0;
  padding:0;
}
header{
  position:sticky;
  top:0;

}
.inner{
  padding: 16px;
  background: #FFC;
  transition: transform 300ms ease;
/* position: absolute; */
  width: 100%;
  box-sizing: border-box;
}
.inner[data-scroll-status="default"]{
  transform: translateY(0);
}
.inner[data-scroll-status="down"]{
  transform: translateY(-100%);
}
.inner[data-scroll-status="up"]{
  transform: translateY(0);
}
.content{
  height:2000px;
    padding:16px;
}

JavaScript

let lastScrollTop = 0;
const innerHeader = document.querySelector('header .inner');

window.addEventListener("scroll", ()=>{ 
  const currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop; 
  let status = 'default';
   if(currentScrollPosition <= 0){
     status = 'default';
   } else if (currentScrollPosition > lastScrollTop) {
      status = 'down';
   } else if (currentScrollPosition < lastScrollTop) {
      status = 'up';
   } 
  
   lastScrollTop = currentScrollPosition;
  innerHeader.setAttribute('data-scroll-status',status);
});