0

私はしばらくこれに苦労してきました。基本的に、ビューポートの幅が790px未満でない限り、特定の高さのdiv（#memberrevealwrapper）があり、それは別の高さです。（レスポンシブウェブデザインです）

現在、＃memberrevealwrapperはjQueryを使用してアニメーション化され、クリックするとブラウザーの上部から表示されるプルタブのように機能し、もう一度クリックするとロールバックします。

これが私のjQueryです：

<script>
    $(document).ready(function() {
        $('#memberloginrevealwrapper').animate({ marginTop: '-75px'}, 200);
        $('#memberloginlink a').toggle(
            function(){
                $('#memberloginrevealwrapper').animate({ marginTop: '0' }, 500);
            },
            function(){
                $('#memberloginrevealwrapper').animate({ marginTop: '-75px'}, 500);
            }
        );
    });

    $(document).ready(function(){
        var pageWidth = $(window).width();  

        if ( pageWidth <= 790 ) {

            $('#memberloginrevealwrapper').animate({ marginTop: '-147px' }, 200);
            $('#memberloginlink a').toggle(
                function(){
                    $('#memberloginrevealwrapper').animate({ marginTop: '0' }, 500);
                },
                function(){
                    $('#memberloginrevealwrapper').animate({ marginTop: '-147px'}, 500);
                }
            );

        }; 
    });

</script>

これは、ブラウザのサイズを変更するまではうまく機能します。ブラウザのサイズを変更しても、新しい高さは検出されず、高さは再調整されません。

動作中のサイトは次のとおりです：clients.januarycreative.com/PES。ページ上部の「会員ログイン」タブを参照しています。

ブラウザのサイズが変更されたときにjQueryを更新する方法を知っている人はいますか？私は自分が知っていることをすべて試し、ページを切り取るところから、バスケットボールのようにページを連続してバウンスさせるまで、すべてを管理してきました。

前もって感謝します！

4

1 に答える 1

1

ブラウザーのサイズが変更されると、コードをもう一度実行する必要があります。そこにあるものは、ページの読み込み時にコード 1 を実行するだけです。ループが必要です(技術的には、ページのサイズが変更されると何度も発生するイベントです)。

どうぞ：

function updateSize() {
    var pageWidth = $(window).width();  

    if ( pageWidth <= 790 ) {
        $('#memberloginrevealwrapper').animate({ marginTop: '-147px' }, 200);
        $('#memberloginlink a').toggle(
            function(){
                $('#memberloginrevealwrapper').animate({ marginTop: '0' }, 500);
            },
            function(){
                $('#memberloginrevealwrapper').animate({ marginTop: '-147px'}, 500);
            }
        );
    }
}

$(window).resize(updateSize);
于 2013-01-16T23:52:15.707 に答える