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。此外，请参阅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>

Answer 2

测量可见#logindiv的高度，并在单击#btn时，为.pagecontent margin-top加上它的原始页边距顶部加上动画，以及logindiv .slidedown（）

Answer 3

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

    });
});

修改

没有动画

$(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）我在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(); }); });

总是向上标题和滑动div

4 个答案: