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的值來顯示/隱藏導航菜單。