JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav">This is a funny nav</div>     
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery.unevent.js"></script>

CSS

body {
  font-family: helvetica neue, helvetica, arial, sans-serif;
  height: 8000px;
}


.nav {
  background: #111;
  text-align: center;
  color: #fff;
  padding-top: 20px;
  padding-bottom: 20px;
  position: fixed;
  right: 0px;
  bottom: -100px;
  left: 0px; 
  transition:.4s ease-in-out;
}

.nav.show{
  bottom:0px;
  transition:.2s ease-in-out;
}

JavaScript

var nav = $('.nav');
var movementTimer = null;

var $doc = $(document);


$doc.on('mouseenter', function(e) {
nav.addClass('show');    
});

$doc.on('mouseleave', function(e)
    {
        clearTimeout(movementTimer);
        movementTimer = setTimeout(function()
        {
            nav.removeClass("show");
        }, 500);
    })