javascript - 通过 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

您应该在CSS 类中更改您的position:absolute;to ：position:fixed;#floatingmenu

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