始終打開頁眉和滑動格

假設頁面始終可見（即在頁面向下滾動時）。始終打開頁眉和滑動格

<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。

來源

2012-08-23 JeanValjean

你的問題是什麼？ – Madbreaks

對不起，問題不明確。我希望現在好轉！謝謝 – JeanValjean

@JeanValjean。對不起，我有你。 – Sami

我發現一個解決方案。在這裏你可以找到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(); 

    }); 
});

來源

2012-08-24 07:34:55 JeanValjean

做一些輕鬆 - 把兩者的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>

來源

2012-08-23 20:56:16 Madbreaks

但在這種情況下，我不會滑動（）div「logindiv」。我將滑下一切。也許我沒有不滿。你能提供一個JSFiddle嗎？ – JeanValjean

測量可見#logindiv的高度，並在單擊時#btn，.animate的#pagecontent與容限頂部加上它的原始保證金頂部，logindiv .slidedown（）

來源

2012-08-23 21:28:39 LorDex

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

    }); 
});

來源

2012-08-23 21:35:25 Ashirvad

通過查看您的jsfiddle，似乎頁面內容消失，然後隨幻燈片向下出現。我修改了你的CSS來突出顯示問題：看看[這裏]（http://jsfiddle.net/P8LRT/1/） – JeanValjean

我剛剛添加在緩動先隱藏它並顯示它。你可以刪除.hide（），它會正常工作.. – Ashirvad

[This]（http://jsfiddle.net/P8LRT/2/）是通過應用您的更改獲得的JSFiddle。看看我的解決方案/技巧，它似乎更好：我可以用這種方式使用slideDown/Up！ – JeanValjean

始終打開頁眉和滑動格

回答

相關問題