JSFiddle - React, Tailwind, and code Playground

by crucify

HTML

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div id="rightBox">
box
</div>
<button id="openRightBox">
open
</button>
<div class="forScroll">
asdf
</div>

CSS

body #rightBox {
  position:absolute;
  top:120px;
  right:0;
  width:100px;
  height:100px;
  background-color:blue;
  transform:translateX(100%);
  opacity:0;
  transition:all 1s;
}
body.rightBoxOpen #rightBox {
  opacity:1;
  transform:translateX(0);
}
.forScroll {
  width:100px;
  height:1000px;
}

JavaScript

$(function() {
	$('#openRightBox').on('click', function() {
  	$(document.body).toggleClass('rightBoxOpen');
  });
  $(window).on('scroll', function() {
  	if(document.documentElement.scrollTop > 50) {
    	$(document.body).addClass('rightBoxOpen');
    } else {
    	$(document.body).removeClass('rightBoxOpen');
    }
  });
});