顶部滑动面板可以移动网页内容

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()方法就是您想要的。