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

您应该在 #floatingmenu CSS 类中将 position:absolute; 更改为 position:fixed;:

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