在窗口调整大小时禁用 jquery 函数

Posted 2023-05-07

【中文标题】在窗口调整大小时禁用 jquery 函数

【英文标题】：Disabling jquery functions on window resize

【发布时间】：2016-05-03 20:26:53

【问题描述】：

我目前在 wordpress 网站上有以下代码。如果 scrollTop 小于导航栏的高度，则滚动功能隐藏购物车按钮。这样在移动设备上，购物车按钮（固定在右上角）不会阻止折叠的菜单按钮。我希望在宽度大于 1024 像素的窗口上禁用此功能，因为我已尝试使用窗口调整大小功能。

jQuery(document).scroll(function() 
    var y = jQuery(this).scrollTop();
    if (y > jQuery('.x-navbar-inner').height()) 
        jQuery('.x-menu-item-woocommerce').fadeIn(1000);
     else 
        jQuery('.x-menu-item-woocommerce').fadeOut(1000);
    
);

jQuery(window).resize(function()
    if (jQuery(window).width() >= 1024)   
        jQuery('.x-menu-item-woocommerce').show();
         
);

我不确定如何让它发挥作用。如图所示，我尝试将滚动功能包装在窗口调整大小功能周围，但这不起作用。

jQuery(window).resize(function()
    jQuery(document).scroll(function() 
    var y = jQuery(this).scrollTop();
    if (y > jQuery('.x-navbar-inner').height()) 
        jQuery('.x-menu-item-woocommerce').fadeIn(1000);
     else 
        jQuery('.x-menu-item-woocommerce').fadeOut(1000);
    
);


    if (jQuery(window).width() >= 1024)   
        jQuery('.x-menu-item-woocommerce').show();
         
);

【参考方案1】：

您可以使用off() 删除监听器。

由于您可能想再次实现它，因此将代码移至处理函数是最干净的

在调整大小处理程序中包装滚动开/关，然后在页面加载时触发调整大小

function scroller()
   //your scroll stuff


jQuery(window).resize(function()

       if (jQuery(window).width() >= 1024) 

              jQuery('.x-menu-item-woocommerce').show();
              jQuery(window).off('scroll');

        else
             jQuery(window).scroll(scroller);
           
// trigger event on page load
).resize();