Question

我在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);
        }  
    }
});

我怎样才能实现这一目标？...

Answer 1

您可以使用jQuery .height()或.width()函数。类似的东西：

$(window).scroll(function(){

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

    ...

顺便说一下，你可能想要debounce你的逻辑，因为在用户滚动时可能会调用很多这个函数（这可能会影响性能）。

在特定窗口大小上停止Jquery函数

1 个答案: