javascript - jQuery - 通过光标位置隐藏/显示页脚导航

Question

我想要做的是在窗口底部有一个小导航菜单，仅当光标位置靠近底部时才显示。我可以让它显示出来，但不能再隐藏了。我尝试过 mouseleave、mouseout 和 if，但无法完全正常工作。这是我遇到困难之前所拥有的:

	$(document).mousemove(function(e) {
	  var cursorPosition = e.pageY - $(window).scrollTop();
	  var windowHeight = $(window).height() - 60;

	  if (cursorPosition >= windowHeight) {
	    $('#thumbnail-nav').animate({
	      bottom: '-20px'
	    }, 500);
	  }
	});

#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;
}

<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>

这是一个 fiddle 。

有人可以给我一点指导吗？

Answer 1

仅使用 CSS 就可以做得更好:

#thumb-nav-hldr{
    display: block;
	position: fixed;
    width: 100%;
	height:130px;
	bottom:-130px;
    padding-top: 60px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;    
}
#thumb-nav-hldr:hover{
    padding-top: 0;
    bottom:0px;
}
#thumbnail-nav {
    margin: 0 auto;
    height:110px;
	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;
		}

<div id='thumb-nav-hldr'>
    <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>
<div>