Question

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

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()删除侦听器。

由于您可能希望再次实现它，因此将代码移动到处理函数

是最干净的

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

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

在窗口大小调整

1 个答案: