JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://yastatic.net/jquery/2.2.0/jquery.js"></script>
<div class="slideboxpn">
</div>
<div class="showpn"></div>
<div style="height:1000px;"></div>

CSS

.slideboxpn{
	width: 200px;
	height: 90px;
	margin-left: 50%;
	left: -369px;
	background-color: #fff;
	border-top: 1px solid #E28409;
	border-right: 1px solid #E28409;
	border-left: 1px solid #E28409;
	position: fixed;
	bottom: -105px;
	box-shadow: 0 0 10px #aaa;
	-moz-box-shadow: 0 0 10px #aaa;
	-webkit-box-shadow: 0 0 10px #aaa;
	}

JavaScript

pn_open = 1000;
pn_close = 300;

$(function() {
  $(window).scroll(function(){
  	console.log(pn_open);
    var distanceTop = $('.showpn').offset().top - $(window).height();
    if  ($(window).scrollTop() > distanceTop)
      $('.slideboxpn').animate({'bottom':'0px'},pn_open);
    else
      $('.slideboxpn').stop(true).animate({'bottom':'-200px'},pn_close);
  });
});