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('mousemove', function(e) {
nav.addClass('show');
});
$doc.on('mousemove', function(e)
{
clearTimeout(movementTimer);
movementTimer = setTimeout(function()
{
nav.removeClass("show");
}, 500);
})