jquery – 面板应从底部向上滑动并向上推动内容,不覆盖

我对jQuery很新,但我几乎可以肯定我想要实现的目标是可能的.

我有一个页面,导航栏固定在底部.导航栏有一个按钮,可以切换一个额外的面板,我想从底部向上滑动.这是我到目前为止：http://jsfiddle.net/E4yGh/

如您所见,面板向上滑动到页面的其余部分,该页面保持不变.我想要的是让页面的其余部分向上滚动以显示面板.页面应完全根据面板div的高度向上滚动,以便面板底部固定在页面底部 – 理想情况下无需指定面板的高度,以便自动调整.

我该怎么做呢？

最佳答案

通过向上部div添加id,可以将slidetoggle()应用于文本的上半部分.将以下行添加到您的jQuery单击函数:(这将切换整个上部div)

$("#upper").slidetoggle("slow");

要仅将上部div滑动到底部的高度,您可以尝试使用CSS属性和.animate()

编辑：

一个简单的解决方案是将导航栏移动到页面顶部,并将文本的CSS位置更改为“relative”. Here is an example

编辑：

以下是我认为您最初寻找的内容：Demo