JSFiddle - React, Tailwind, and code Playground

by Jesse M

HTML

<ul id="thumbnail-nav">
	<li><a href=""><img src="http://placehold.it/100x100" alt="" /></a></li>
	<li><a href=""><img src="http://placehold.it/100x100" alt="" /></a></li>
	<li><a href=""><img src="http://placehold.it/100x100" alt="" /></a></li>
</ul>

CSS

#thumbnail-nav {
	position:fixed;
	height:110px;
	bottom:-150px;
	padding:10px 15px;
	width:50%;
	left:calc(50% - 25%);
	background:rgba(0,0,0,.8);
	border-radius:5px 5px 0 0;
    display:-webkit-flex;
    display:flex;
	}
	#thumbnail-nav li {
		display:inline-block;
        text-align:center;
        -webkit-flex:1;
        -ms-flex:1;
        flex:1;
		}

JavaScript

$(document).mousemove(function(e){
		var cursorPosition = e.pageY - $(window).scrollTop();
		var windowHeight = $(window).height() - 60;
		
		if(cursorPosition >= windowHeight){
			$('#thumbnail-nav').animate({bottom:'-20px'},500);
		}
	});