Question

我正在使用不同的 @media（最小宽度，最大宽度）构建一个网站，以便在主要设备上显示网站完美。

我在滚动屏幕顶部有一个菜单，这是jQuery代码：

var win_width = $(window).width();

        if (win_width >= 751) {
            var el = $('div.menu-header');
            var elpos_original = el.offset().top;
            $(window).scroll(function(){
                var elpos = el.offset().top;
                var windowpos = $(window).scrollTop();
                var finaldestination = windowpos;
                if(windowpos<elpos_original) {
                    finaldestination = elpos_original;
                    el.stop().css({'top':0});
                } else {
                    el.stop().animate({'top':finaldestination-elpos_original+30},500);
                }
            });
        }
    }

它工作正常，但如果我以750像素调整窗口大小，我想停止此功能并将 var el 恢复到原始位置。

Answer 1

注意，只要用户滚动

，就会立即调用给予滚动的功能

var el = $('div.menu-header'),
elpos_original = el.offset().top;
$(window).scroll (function() {
    var win_width = $(this).width();
      if (win_width >= 751) {
        var elpos = el.offset().top;
        var windowpos = $(this).scrollTop();
        var finaldestination = windowpos;
        if(windowpos<elpos_original) {
            finaldestination = elpos_original;
            el.stop().css({'top':0});
        } else {
            el.stop().animate({'top':finaldestination-elpos_original+30},500);
        }
    } else {
         $(this).resize(); // calling to handle declared below. 
    }
}).resize( function() { 
       // Check when resizing whether size is at most 750
       // and restore original position;
       if( $(this).width() <=750 ) { 
          el.stop().css( "top", "0" )
       }
} )

jQuery如果条件停止动画

1 个答案: