0
私はいくつかのjQueryアニメーションを持つワードプレスのウェブサイトを構築しています。たとえば、私がスクロールするとメニューがスクロールして表示され、スクロールすると表示されます。jQueryモバイルが遅れています
また、いくつかのグリッドを画像で表示したり非表示にするためのトグルクラスがあります。デスクトップではすべてがスムーズに問題なく動作しますが、モバイルではメニューを隠したり表示したりするのにかなりの遅延があり、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;
}