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

Posted 2023-02-25

【中文标题】面板应该从底部向上滑动并将内容向上推，没有覆盖

【英文标题】：Panel should slide up from the bottom and push content up, no overlay

【发布时间】：2012-07-23 10:29:42

【问题描述】：

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

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

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

我该怎么做呢？

【参考方案1】：

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

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

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

编辑：

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

编辑：

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

【讨论】：

好的，现在主页向上移动，但它完全消失了。能否请您详细说明您的最后一句话？

尝试查看 CSS 选择器“overflow:hidden”，应该有一种方法可以通过底部滑块的高度调整上部 div 的大小，以有效隐藏一定数量的上部 div。

这很漂亮。不幸的是，我的客户一心想要将导航栏放在底部......我几乎完全需要你在编辑中所做的，只是从下往上而不是从上往下。

哈！您的第二次编辑正是我想要的，谢谢！

@Halcyon 在您的第二次编辑中，我在隐藏内容和关闭 div 之间添加了一个 div，以便在单击时使 toggle 上方的内容向上移动。但是，我无法让它工作。这是小提琴：jsfiddle.net/4k6du/132你能帮帮我吗？

【参考方案2】：

给你; Working example of your code

【讨论】：

谢谢，这会移动主页。但现在它完全消失了。请参阅我对 Halcyon 答案的评论。

是的，它切换了主 div，因为我在其中添加了一个 id 并在 jQuery 中添加了代码。我可以完成... 计算主 div 的高度和面板的高度，然后当您单击并触发事件时。然后你用 jquery .animate() 并从主 div 中减去那个高度 - 高度 = 面板占用的空间......我可以举个例子，但这需要 20 分钟左右......

你的意思是这样的：link 这是正确的方向，但是一旦动画完成，主页就会返回......我必须做些什么才能做到这一点保持向上滚动？

【参考方案3】：

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

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

【参考方案4】：

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

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

希望你能明白。

【参考方案5】：

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

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

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

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

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

【参考方案6】：

试试这个代码：

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

这可能会对你有所帮助。

【讨论】：

谢谢，但不幸的是，这不会使页面的其余部分向上滚动。我不希望面板与主页重叠。

尝试 p:last-child margin-bottom:50px;