0

ユーザーが下にスクロールすると、アニメーションが小さくなるというJqueryの機能があります。しかし、ウィンドウサイズが1024px未満の場合、その機能を停止させたい...

つまり、ウィンドウ サイズが 1024px 未満の場合、アニメーションは表示されず、常に同じサイズのままになります。したがって、この関数は、ウィンドウ サイズが 1024px より大きい場合にのみ機能します。

これがコードです...

$(function(){
    $('header').data('size','big');
});

$(window).scroll(function(){
    if($(document).scrollTop() > 30) 
    {
        if($('header').data('size') == 'big')
        {
            $('header').data('size','small');
            $('header').stop().animate({"height":"60px"}, 200, 'easeOutQuad');
            $('nav ul').stop().animate({"padding-top":"0", "margin":"0.84em 0"}, 200);
            $('#logo').stop().animate({"padding-top":"0.5em", "padding-bottom":"0.6em"}, 200);
            $('#logo img').stop().animate({"width":"170px", "height":"40px"}, 200);
        }
    }
    else
    {
        if($('header').data('size') == 'small')
        {
            $('header').data('size','big');
            $('header').stop().animate({"height":"92px"}, 200, 'easeOutQuad');
            $('nav ul').stop().animate({"padding-top":"0.68em", "padding-bottom":"0.77em", "margin":"1em 0"}, 200);
            $('#logo').stop().animate({"padding-top":"1em", "padding-bottom":"1.35em"}, 200);
            $('#logo img').stop().animate({"width":"215px", "height":"50px"}, 200);
        }  
    }
});

どうすればそうなりますか？...

4

1 に答える 1

1

jQuery .height()または.width()関数を使用できます。何かのようなもの：

$(window).scroll(function(){

    // Check window height or width
    if ($(window).height() <= 1024) return;

    ...

余談ですが、ユーザーがスクロールしているときにこの関数がかなり頻繁に呼び出される可能性があるため (パフォーマンスに影響を与える可能性があるため)、ロジックをデバウンスすることをお勧めします。

于 2013-09-08T01:20:51.830 に答える