0

我在 Jquery 上有一个功能，当用户向下滚动时，动画会变小。但我希望该功能在窗口大小低于 1024 像素时停止工作......

我的意思是，当窗口大小低于 1024 像素时，不会动画，它将始终保持相同的大小。所以这个功能只有在窗口大小大于 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 回答