Javascript 通过HTML、CSS和JS滑动底部面板

我正在尝试制作一个菜单，该菜单将从悬停页面底部滑动。我已经实现了滑动效果，我的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: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;
}

请发布一个JSFIDLE，而不是指向您自己页面的链接。这允许实时编码/检查/测试Tanks，我现在用fiddle替换了站点的url这对简单的CSS有效，不需要JS，position:fixed很好，只是用WebKit inspector试用了一下。
#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;
}