jquery - 始终向上标题和滑动 div

Question

假设有一个始终可见的标题(即当页面向下滚动时)。

<div id="header">
    <div id="logindiv">
        Something to show for login purpose
    </div>
    My title etc.
</div>
<div id="pagecontent">
    page content and also a <button id="btn">Button</button>
</div>

CSS 类似:

 #logindiv{
    width: 100%;  
    display:none;
 }
 #header{
    display:block;
    z-index: 1000;
    height:50px;
    position: fixed;
    top: 0;
    width: 100%  
 }
 #pagecontent{
    z-index: 0;
    margin-top:50px;
    width: 100%  
 }

当点击这样的按钮时，div logindiv 会通过 jQuery 显示:slideDown() 函数用于装饰目的。

我怎样才能向下滑动pagecontent div 到与logindiv 相同的高度？ 当然，我还必须在隐藏 div 的 slide-up 之后重置所有内容。

查看我的工作 JSFiddle . 此外，参见 this site有关所需输出的示例。

Answer 1

做一些更简单的事情——将两个 div 放在一个容器 div 中，然后滑动容器:

<div id="slide-me-instead">  <!-- Work with this -->
    <div id="header">
        <div id="logindiv">
            Someting to show for login purpose
        </div>
        My title etc.
    </div>
    <div id="pagecontent">
        page content and also a <button id="btn">Button</button>
    </div>
</div>