jQuery手机有延迟

Question

我建立了一些jQuery动画的WordPress网站。例如，当我向下滚动时滚动菜单将隐藏，并显示当我向上滚动时。

此外，我有一些toggleClass用于显示和隐藏一些网格与图像。在桌面上，一切都可以顺利进行，没有问题，但是在移动设备上，隐藏和显示菜单存在巨大延迟，而toggleClass有时不起作用。

尽管我在桌面上调整浏览器大小并达到较小的分辨率，但在移动设备上却没有。我正在使用三星A3 2016，而且手机并不慢。

有没有人有解决办法？

这是我正在使用的代码。我可能使用了太多的代码？

jQuery('.custom-search i').click(function() { 
    jQuery('.search-query').toggleClass('showsearch'); 
}); 

jQuery('a.popup-open').click(function() { 
    jQuery('.popup-submit').css('display', 'block'); 
}); 

jQuery('.popup-close').click(function() { 
    jQuery('.popup-submit').css('display', 'none'); 
}); 

jQuery(document).scroll(function() { 
    var h = jQuery(".x-navbar").height(); 
    var t1 = jQuery(".hide-me").offset().top; 
    if ((jQuery(this).scrollTop() + h) >= t1) { 
    jQuery('.hidden-menu').css({ 
     "display": "block" 
    }); 
    jQuery('.x-navbar-wrap').css({ 
     "background-color": "#eaeaea" 
    }); 
    jQuery('.x-brand.img').css({ 
     "visibility": "hidden" 
    }); 
    jQuery('.x-navbar .desktop .x-nav > li > a > span').css({ 
     "color": "#111" 
    }); 
    jQuery('.custom-search i').css({ 
     "color": "#111" 
    }); 
    jQuery('.home .x-navbar .places-menu').css({ 
     "color": "#111" 
    }); 


    } else { 
    jQuery('.hidden-menu').css({ 
     "display": "none" 
    }); 
    jQuery('.x-navbar-wrap').css({ 
     "background-color": "transparent" 
    }); 
    jQuery('.x-brand.img').css({ 
     "visibility": "visible" 
    }); 
    jQuery('.x-navbar .desktop .x-nav > li > a > span').css({ 
     "color": "#fff" 
    }); 
    jQuery('.custom-search i').css({ 
     "color": "#fff" 
    }); 
    jQuery('.home .x-navbar .places-menu').css({ 
     "color": "#fff" 
    }); 
    } 
}); 

jQuery('.places-map').click(function() { 
    jQuery('.map-container').toggleClass('show-container'); 
    jQuery('.close-map').css('display', 'block'); 
}); 

jQuery('.close-map').click(function() { 
    jQuery('.map-container').toggleClass('show-container'); 
    jQuery('.close-map').css('display', 'none'); 
}); 

jQuery('.places-menu').click(function() { 
    jQuery('.places-grid').toggleClass('show-grid', '1000'); 
    jQuery('.img-rotate').toggleClass('rotate'); 
}); 

jQuery('.box').click(function() { 
    jQuery('.places-grid').toggleClass('show-grid', '1000'); 
}); 

jQuery(document).ready(function() { 
    jQuery(document).on("scroll", onScroll); 

    jQuery('.place-region a[href^="#"]').on('click', function(e) { 
    e.preventDefault(); 
    jQuery(document).off("scroll"); 

    jQuery('.place-region a').each(function() { 
     jQuery(this).removeClass('active'); 
    }) 
    jQuery(this).addClass('active'); 

    var target = this.hash; 
    $target = jQuery(target); 
    jQuery('html, body').stop().animate({ 
     'scrollTop': $target.offset().top + 2 
    }, 500, 'swing', function() { 
     window.location.hash = target; 
     jQuery(document).on("scroll", onScroll); 
    }); 
    }); 
}); 

function onScroll(event) { 
    var scrollPosition = jQuery(document).scrollTop(); 
    jQuery('.place-region a').each(function() { 
    var currentLink = jQuery(this); 
    var refElement = jQuery(currentLink.attr("href")); 
    if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) { 
     jQuery('.place-region a').removeClass("active"); 
     currentLink.addClass("active"); 
    } else { 
     currentLink.removeClass("active"); 
    } 
    }); 
} 

// Hide Header on on scroll down 
var didScroll; 
var lastScrollTop = 0; 
var delta = 5; 
var navbarHeight = jQuery('.x-navbar-wrap').outerHeight(); 

jQuery(window).scroll(function(event) { 
    didScroll = true; 
}); 

setInterval(function() { 
    if (didScroll) { 
    hasScrolled(); 
    didScroll = false; 
    } 
}, 250); 

function hasScrolled() { 
    var st = jQuery(this).scrollTop(); 

    // Make sure they scroll more than delta 
    if (Math.abs(lastScrollTop - st) <= delta) 
    return; 

    // If they scrolled down and are past the navbar, add class .nav-up. 
    // This is necessary so you never see what is "behind" the navbar. 
    if (st > lastScrollTop && st > navbarHeight) { 
    // Scroll Down 
    jQuery('.x-navbar-wrap').removeClass('nav-down').addClass('nav-up'); 
    jQuery('.hidden-menu').removeClass('nav-down').addClass('nav-up'); 
    jQuery('.place-bar').removeClass('nav-down-place').addClass('nav-up-place'); 
    } else { 
    // Scroll Up 
    if (st + jQuery(window).height() < jQuery(document).height()) { 
     jQuery('.x-navbar-wrap').removeClass('nav-up').addClass('nav-down'); 
     jQuery('.hidden-menu').removeClass('nav-up').addClass('nav-down'); 
     jQuery('.place-bar').removeClass('nav-up-place').addClass('nav-down-place'); 
    } 
    } 

    lastScrollTop = st; 
} 

Answer 1

我添加了touchstart以及点击动作，并且所有的东西都能在手机上完美运行。

jQuery(document).ready(function() { 
    jQuery('.home .box').on('click', function() { 
     jQuery('.places-grid').removeClass('show-grid' , '1000'); 
    }); 
}); 

而且我已经加入这个

jQuery(document).ready(function() { 
    jQuery('.home .box').on('touchstart click', function() { 
     jQuery('.places-grid').removeClass('show-grid' , '1000'); 
    }); 
});