Question

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

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

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

我将如何做到这一点？

Answer 1

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

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

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

编辑：

一个简单的解决方案是将导航栏移动到页面顶部，并将文本的CSS位置更改为＆＃34; relative＆＃34;。 Here is an example

编辑：

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

Answer 2

你去; Working example of your code

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' });

所以发生的一切都是滑动的菜单幻灯片（只有我不得不做的其他事情是将身体的宽度增加200px，因为我的内容不断下降到下一行。

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

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

Answer 6

尝试此代码：

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

这可能会帮助你。

面板应从底部向上滑动并向上推动内容，不得覆盖

6 个答案: