0

常に表示されるヘッダーがあるとします (つまり、ページが下にスクロールされたときも)。

<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()関数は、装飾目的で使用されます。

logindivと同じ高さでpagecontent div をスライドダウンするにはどうすればよいですか? もちろん、非表示の div をスライドアップした後、すべてをリセットする必要もあります。

私の作業JSFiddleを参照してください。また、目的の出力の例については、このサイトを参照してください。

4

4 に答える 4

0

私は解決策を見つけました。ここで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();

    });
});
于 2012-08-24T07:34:55.077 に答える
0

Do something easier - put both divs in a container div, and slide the container:

<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-23T20:56:16.417 に答える
0

表示されている #logindiv の高さを測定し、#btn がクリックされたときに、#pagecontent のマージン上部と元のマージン上部を logindiv .slidedown() とともに .animate します。

于 2012-08-23T21:28:39.920 に答える
0

ワーキングデモ

コード

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

    });
});​
于 2012-08-23T21:35:25.963 に答える