Отключение функций jquery при изменении размера окна

Question

В настоящее время у меня есть следующий код на сайте 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(); 
    }  
}); 

Answer 1

Вы можете использовать off(), чтобы удалить слушателя.

Поскольку вы можете снова реализовать это чистейший переместить код в функции обработчика

Wrap прокрутки вкл/выкл в обработчике изменения размера, а затем вызвать изменение размера при загрузке страницы

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();