JSFiddle - React, Tailwind, and code Playground

by mchashok

HTML

<div>

    <div class="fade">
        menu
    </div>
 
      <button id="button" style="background: url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png) no-repeat center; background-size: 30px 30px;"></button>
 
</div>

CSS

body {
    height: 5000px;    
}
.fade {
    right:0px;
    top: 20px;
    position: fixed;
    height: 70px;
    width: 50px;
    background-color: #d15757;
    color: #fff;
    padding: 10px;
}
#button {
  top: 20px;
  right: -20px;
  opacity:0;
  position: fixed;
	height: 30px;
	width: 30px;
	background: #34696f;
	border: 2px solid rgba(33, 68, 72, 0.59);
}

JavaScript

// detect size of window (i.e. detect mobile)
var mq = window.matchMedia('all and (max-width: 700px)');

// hide menu and display button on scroll
$(window).scroll(function() {
	if(mq.matches) {
  	//width of browser is bigger than 700px
    if ($(this).scrollTop()>100)
     {
       if(!$('.fade').is('.hidden')) {
        $('.fade').stop().animate({ // menu goes out
              top: '-20px',
              opacity: '0',
          }).addClass('hidden');
          $('#button').stop().animate({ // button comes in
              top: '30px',
              opacity: '1',
          });
       }
     }
    else
     {
       if($('.fade').is('.hidden')) {
        $('.fade').stop().animate({ // menu comes in
              top: '0px',
              opacity: '1',
          }).removeClass('hidden');
        $('#button').stop().animate({ // button goes out
              top: '-20px',
              opacity: '0',
          });
        }
     }
  } else {
    // the width of browser is less then 700px
}
   
 });
 
 
 $(document).ready(function(){
 	if(mq.matches) {
    // the width of browser is more then 500px
    $("#button").click(function(){
        $(".fade").stop().animate({ // menu comes in
            right: '0px',
            opacity: '1',
        });
        $("#button").stop().animate({ // button goes out
            right: '-20px',
            opacity: '0',
        });
    });
    
   } else {
    // the width of browser is less then 500px
	}  
});