頂部滑動面板將網頁內容向下移動

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 librari的es具有動畫功能。

Answer 2

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