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上滑后重新设置一切。

请参阅我的工作JSFiddle。此外，请参阅此站点以获取所需输出的示例。

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>

Answer 2

测量可见#logindiv 的高度，当#btn 被点击时，动画#pagecontent margin-top 加上它的原始边距顶部，连同logindiv .slidedown()

Answer 3

工作演示

代码

$(function () {
    $('#btn').click(function(){
        var div =  $('#logindiv')
            var div2=$('#pagecontent')
            var div3=$('#header')
        if(div.is(':hidden'))
            {  div.slideDown();
        div2.css('margin-top',parseInt(div2.css('margin-top'))+ $('#header').height()+'px').hide().show('slow')} 
            else {
          div.slideUp();
        div2.css('margin-top',parseInt(div2.css('margin-top'))- $('#header').height()+'px').hide().show('slow')
    }

    });
});​

编辑

没有动画

$(function () {
    $('#btn').click(function(){
        var div =  $('#logindiv')
            var div2=$('#pagecontent')
            var div3=$('#header')
        if(div.is(':hidden'))
            {  div.slideDown();
        div2.css('margin-top',parseInt(div2.css('margin-top'))+ $('#header').height()+'px')} 
            else {
          div.slideUp();
        div2.css('margin-top',parseInt(div2.css('margin-top'))- $('#header').height()+'px')
    }

    });
});​

Answer 4

我找到了解决方案。在这里您可以找到JSFiddle。

1）我在页面内容之前添加了一个空 div。

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

2）我通过添加新div的CSS来修改CSS，这等于滑动div的CSS。当然，我必须将高度设置为固定。

 #logindiv, #forsliding{
    width: 100%;
    height:40px;   
    display:none;
 }

3) 我对 Javascript代码做了一个小改动。

$(function () {
   $('#btn').click(function(){
       var div =  $('#logindiv');
       if(div.is(':hidden'))
         div.add('#forsliding').slideDown();
       else
         div.add('#forsliding').slideUp();

    });
});