sliding - 顶部滑动面板向下移动网页内容

Question

我想要一个从网页顶部向下滑动的登录页面。但我希望它向下移动整个网站而不是覆盖页面。

任何人都可以给我一个链接？

埃里克

Answer 1

一种方法是在 HTML 中使用相对定位，以便主要内容在登录后流动。这意味着您所要做的就是调整登录的高度div以将其余内容下推：

<div id="thePage">
  <div id="login"><!-- login stuff here --></div>
  <div id="restOfThePage"><!-- The rest of the page here --></div>
</div>

CSS 会是这样的：

#login { height: 0; }

然后，当您想通过 JavaScript 显示登录面板时，您只需执行以下操作：

document.getElementById("login").style.height = "100px"; // for example

或者，如果您想为登录面板设置动画，您可以使用 jQuery 或任意数量的具有动画功能的 JavaScript 库。

Answer 2

如果您使用的是 jQuery，那么.slideDown()方法就是您想要的。