JSFiddle - React, Tailwind, and code Playground

by Emmanuel Garcia

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<p>hay</p>
<p>hay</p>
<p>hay</p>
<p>hay</p>
<p>hay</p>
<p>hay</p>
<p>hay</p>
<p>hay</p>
<p>hay</p>
<p>hay</p>
<p>hay</p>
<p>hay</p>
<p>hay</p>
<p>hay</p>
<p>hay</p>
<p>hay</p>
<p>hay</p>
<p>hay</p>
<p>hay</p>
<p>hay</p>
<p>hay</p>
<p>hay</p><p>hay</p>
<p>hay</p>
<p>hay</p>
<p>hay</p>
<p>hay</p>
<p>hay</p>
<p>hay</p>
<p>hay</p>
<p>hay</p>
<div id="social">I AM THE ONE</div>

CSS

#social {
  position: fixed;
  background-color:#f00;
  color: #fff;
  right: 0;
  top: 0;
  padding: 10px;
  display: none;
}

JavaScript

var hideTimeout = null;

var show = function() {
  $('#social').show();
}

var hide = function() {
  $('#social').hide();
}

$(document).ready(function(){

  $(window).scroll(function(e){
  	if (hideTimeout) {
    	window.clearTimeout(hideTimeout);
      hideTimeout = null;
    }
    show();

    window.setTimeout(hide, 3000);
  });
  
});