JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="menu">
   <div id="menu-btn">menu</div>
   <ul>
     <li>HOME PAGE</li>
     <li>ABOUT PROJECT</li>
     <li>MEDIA</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
   <div class="fragment"></div>
</div>

<button id="btn" style="margin-top: 50px">animation</button>


<div style="height: 1000px;"></div>

CSS

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
#btn {
  position: absolute;
  right: 20px;
  top: 20px;
}
div#menu {
  position:fixed;
  padding: 20px;
  width: 240px;
  overflow: hidden;
  transition-delay: 1s;
}
div#menu-btn {
  text-align: center;
  font-size: 18px;
  transform: translateX(100%);
  transition: 1s;
}
div#menu.active div#menu-btn {
  transform: translateX(0);
}
ul li {
  transition-delay: .5s;
  transition: .5s;
}
div#menu.active ul li {
  opacity: 0;
}
div.fragment {
  width: 100%;
  height: 100%;
  background: lightblue;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

JavaScript

var _i = null;
$(window).on('scroll',function(){
if($(window).scrollTop() > 1){
		clearTimeout(_i);
    _i = setTimeout(function(){
    	$('ul').slideUp(1000);
    },500)
    $('#menu').addClass('active');
    }
    else {
      clearTimeout(_i);
      _i = setTimeout(function(){
        $('ul').slideDown(1000);
      },500)
      $('#menu').removeClass('active');
    }
})