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

Question

我想要做的是在窗口底部有一个小的导航菜单，只有当光标位置靠近底部时才显示。我能够让它显示，但不能再隐藏。我尝试过mouseleave,mouseout和if，但无法完成它的工作。下面是我，直到我被卡住：

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

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

#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; 
 
\t position: fixed; 
 
    width: 100%; 
 
\t height:130px; 
 
\t 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; 
 
\t padding: 10px 15px; 
 
\t width:50%; 
 
\t left:calc(50% - 25%); 
 
\t background:rgba(0,0,0,.8); 
 
\t border-radius:5px 5px 0 0; 
 
    display:-webkit-flex; 
 
    display:flex; 
 
\t } 
 
\t #thumbnail-nav li { 
 
\t \t display:inline-block; 
 
     text-align:center; 
 
     -webkit-flex:1; 
 
     -ms-flex:1; 
 
     flex:1; 
 
\t \t }

<div id='thumb-nav-hldr'> 
 
    <ul id="thumbnail-nav"> 
 
\t  <li><a href=""><img src="http://placehold.it/100x100" alt="" /></a></li> 
 
\t  <li><a href=""><img src="http://placehold.it/100x100" alt="" /></a></li> 
 
\t  <li><a href=""><img src="http://placehold.it/100x100" alt="" /></a></li> 
 
    </ul> 
 
<div>

Answer 2

我不是那种问题的专家，但我认为我找到了一个可以帮助你的小解决方案。

解决方案使用的是boolean variable (flag)。当它显示导航菜单时，将值更改为true，当您离开时，将其更改为false。

这里是你的代码的更改：

var showNavMenu = false; // The flag variable set to false because menu is hidden 

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

     if(cursorPosition >= 232){ 

      if (flag === false) { 
       flag = true; 
       $('#thumbnail-nav').animate({bottom:'-20px'},500); 
      } 

     } else { 

      if (flag === true) { 
       $('#thumbnail-nav').animate({bottom:'-150px'},500); 
       flag = false; 
      } 
     } 
    }); 

的if statements检查flag的值来显示/隐藏导航菜单。