jquery - 面板应该从底部向上滑动并将内容向上推，没有覆盖

Question

我对 jQuery 很陌生，但我几乎可以肯定我想要实现的目标是可能的。

我有一个底部固定有导航栏的页面。导航栏有一个按钮，它应该切换一个额外的面板，我想从底部向上滑动。这是我到目前为止所拥有的：http: //jsfiddle.net/E4yGh/

如您所见，面板向上滑动到页面的其余部分，并保持在原位。我想要的是让页面的其余部分向上滚动以显示面板。页面应该完全根据面板的高度向上滚动div，这样面板的底部就固定在页面的底部——理想情况下不需要指定面板的高度，这样它就会自动调整。

我该怎么做呢？

Answer 1

通过向上部 div 添加一个 id，您可以将 slideToggle() 应用于文本的上部。将以下行添加到您的 jQuery click 函数中：（这将切换整个上部 div）

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

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

编辑：

一个简单的解决方案是将导航栏移动到页面顶部并将文本的 CSS 位置更改为“相对”。 这是一个例子

编辑：

这是我相信您最初正在寻找的内容：Demo

Answer 2

给你；您的代码的工作示例

Answer 3

据我了解，您想在底部创建一个导航栏，单击该导航栏会向上滑动并显示更多详细信息。如果是这样，您可以查看此链接CREATING A SLIDE UP FOOTER USING JQUERY。

希望它会有所帮助，祝你好运。

Answer 4

我认为这个想法是为div具有内容的动画制作动画。检查这个：http: //jsfiddle.net/52MeD/

div#content当您触发向上滑动时，会设置动画的高度。我通过反复试验选择了一个尺寸，但我相信你可以做一些数学计算来计算它应该缩小到多少以适合下面板——我很懒，抱歉。我还对其属性进行了动画bottom处理，因此感觉下面板确实将内容的底部向上推（而不是仅仅占据空间）。当然，为了使它起作用，div#content必须将位置设置为relative。

我希望你能明白。

Answer 5

我给我的导航菜单一个负边距，所以它在页面上不可见（向左浮动）我对右边的内容没有做任何事情，除了让它向左浮动。

$('.slidingMenu').animate({ "margin-left": '+=200' });

所以所发生的一切就是滑动菜单滑入（我唯一要做的就是将正文的宽度增加 200 像素，因为我的内容不断下降到下一行。

这是一个真正有帮助的小提琴的链接

http://jsfiddle.net/XNnHC/3/

Answer 6

试试这段代码：

#lower {
      width: 90%;
      position: fixed;
      bottom: 0;
      background-color:#d5d5d5;
}

这可能会帮助你。