始终打开页眉和滑动格

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% 
} 

股利logindiv显示与jQuery上点击时，这样的按钮：一个了slideDown（）功能用于美容目的。

哪有我也滑动下来的pagecontent格由logindiv相同的高度？ 当然，我也必须重置隐藏div的滑动后的所有内容。

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

Answer 1

我发现一个解决方案。在这里你可以找到JSFiddle。

1）I 在pagecontent之前添加了一个空的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(); 

    }); 
}); 

Answer 2

做一些轻松 - 把两者的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 3

测量可见#logindiv的高度，并在单击时#btn，.animate的#pagecontent与容限顶部加上它的原始保证金顶部，logindiv .slidedown（）

Answer 4

WORKING DEMO

CODE

沿

$(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') 
    } 

    }); 
});​ 

编辑

WITHOUT动画

$(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') 
    } 

    }); 
});​