通過HTML，CSS和JS滑動底部面板

Question

我正在嘗試製作一個將從頁面底部滑過懸停的菜單。我已經達到了滑動效果，我的div已經坐在屏幕的底部，頂部顯示40px，因此您可以將其懸停在其上以激活滑動效果。 問題是div不是「固定」的，它不會隨頁面一起滾動。我覺得有點JS將是最好的解決辦法

這裏是我的HTML：

<div id="floatingmenu"> 
    <div id="listcontainer"> 
     <ul class="floatingcolumn"> 
      <li>Link 1</li> 
     </ul> 
     <ul class="floatingcolumn"> 
      <li>Link 2</li> 
     </ul> 
     <ul class="floatingcolumn"> 
      <li>Link 3</li> 
     </ul> 
    </div> 
</div> 

而這裏的CSS：

#floatingmenu { 
    width:100%; 
    height:320px; 
    position:absolute; 
    bottom:-300px; 
    z-index:99999; 
    background:#000; 
    -webkit-transition: all 700ms ease; 
    -moz-transition: all 700ms ease; 
    -ms-transition: all 700ms ease; 
    -o-transition: all 700ms ease; 
    transition: all 700ms ease; 
} 

#floatingmenu:hover { 
    bottom:0px; 
    -webkit-transition: all 700ms ease; 
    -moz-transition: all 700ms ease; 
    -ms-transition: all 700ms ease; 
    -o-transition: all 700ms ease; 
    transition: all 700ms ease; 
} 

#listcontainer { 
    position:relative; 
    width:900px; 
    margin-left:auto; 
    margin-right: auto; 
} 

#listcontainer ul { 
    width:290px; 
    float:left; 
    color:FFF; 
} 

您可以在這裏的行動看出來：

http://jsfiddle.net/fn6t7/

任何幫助將不勝感激。

謝謝！

Answer 1

你應該改變你的position:absolute;到position:fixed;您#floatingmenu CSS類中：

#floatingmenu { 
    width:100%; 
    height:320px; 
    position:fixed; 
    bottom:-300px; 
    z-index:99999; 
    background:#000; 
    -webkit-transition: all 700ms ease; 
    -moz-transition: all 700ms ease; 
    -ms-transition: all 700ms ease; 
    -o-transition: all 700ms ease; 
    transition: all 700ms ease; 
}