JSFiddle - React, Tailwind, and code Playground

HTML

<div class="height">
    <div class="ret_block">
      <div class="ret"> </div>
    </div>
  </div>

CSS

.height {
  width: 300px;
  height: 3000px;
  background-color: #FFF;
}

.ret_block {
  height: 65px;
  width: 65px;
  position: absolute;
  top: -65px;
  right: 60px;
  opacity: 0;
}

.ret_block.up {
  opacity: 1;
  transition: opacity 1.2s;
  
}

.ret_block.up .ret {
  animation: up 1.2s forwards;
}

.ret {
  background: #80c111;
  opacity: 0.9;
  border-radius: 50% !important;
  cursor: move;
  height: 65px;
  position: absolute;
  width: 65px;
  z-index: 9999;
  cursor: pointer;
}

@keyframes up {
  from {bottom: -130px;}
  to {bottom: 0;}
}

JavaScript

(function(selector, offset) {
  var $b = $(selector);
  $(window).scroll(function() {
    if ($(this).scrollTop() - $b.offset().top >= offset)
    	$b.removeClass('up')
    if ($(this).scrollTop() - offset > $b.offset().top) {
      var h = ($(this).scrollTop() + window.innerHeight) - $b.height() - offset;
      $b.css('top', h+'px');
      $b.addClass('up');
    }
  }).trigger('scroll');
})('.ret_block', 60);