Почему прыгает меню в мобильной версии?

Question

[PavelAndreychuk]

Доброго времени суток. Есть проблема- сайт https://magicsteel.ru/, на мобильной версии при открытии меню и скроллинга вниз меню "прыгает", что доставляет определенные неудобства. Единственное что пока увидел что стили у менюшки меняются когда скроллишь вниз на "nav-contaiter-fixed", но чего-то что мешало бы нормальной работе этого меню я так и не нашёл :(

Answer 1

[Андрей]

Собственно из-за добавления fixed на nav-container при скролле оно и прыгает. Здесь https://magicsteel.ru/catalog/view/theme/Electrify... каскадом задается высота у меню от классаfixed

Comments

[PavelAndreychuk]

Спасибо, в этом я тоже как раз разобрался( ну как мне кажется)
А вот как убрать это добавление?
Я просто в верстке ни в зуб ногой, моя не понимать что надо делать)
То есть меняется оно из-за какого-то скрипта, так? А где скрипт искать?

[FeST1VaL]

PavelAndreychuk, https://magicsteel.ru/catalog/view/javascript/code...

[Андрей]

PavelAndreychuk, можно вот в этом файлике убрать высоту, строки 5487 и 5265

https://magicsteel.ru/catalog/view/theme/Electrify...

[PavelAndreychuk]

Андрей,
хм.. .А вот об этом я и не подумал, а ведь можно было догадаться.
Спасибо, такое решение в целом подойдёт.

Answer 2

[FeST1VaL]

Если правильно вас понял, то у fixed не хватает самого свойства position: fixed; ...

Ну и в скрипте что то не так... слишком поздно меню добавляет fixed. Поидее должно после прохода фиолетового блока с меню добавляться fixed и оно сверху сползает типо.

Видосик

Comments

[PavelAndreychuk]

Спасибо.
Фиксед я руками убрал, думал может поможет, но ничего не изменилось. Вернул фиксед на место.

[FeST1VaL]

PavelAndreychuk, так не понятно что именно вы хотите добиться... плавности?

[PavelAndreychuk]

Артем Будин, хочу чтобы оно не перепрыгивало, а скролл по меню продолжался до его конца, в общем то, сейчас получается что оно схлопывается, или как это ещё назвать

[FeST1VaL]

PavelAndreychuk, а ну это надо блокировать скролл страницы, пока открыто меню. И я понял почему у вас так поздно срабатывает... у вас чисто для мобильных телефонов сделан fixed... и указано чисто 400px от верха... короче говоря я бы поменял 400px на рассчитываемую высоту шапки + высоту фиолетового блока. Засунул меню в еще один блок который будет оставаться на месте высотой в фиолетовый блок, чтобы страница не прыгала во время fixed (тк блок по сути пропадает с их уровня и становится поверх них и все элементы поднимаются вверх на высоту фиолетового блока)

[PavelAndreychuk]

Артем Будин, Спасибо, теперь у меня есть несколько решений, подумаем-потестим.

[PavelAndreychuk]

Артем Будин, добрый день. Вы ранее писали что надо блокировать скролл страницы пока открыто меню, а подскажите, каким образом это сделать? Я погуглил, но к сожалению так толком ничего и не понял....

[FeST1VaL]

PavelAndreychuk, ну эт по сути сложно, тк где то в одном браузере работает, а в другом нет, и надо под все делать...

Примерно такой код, но тут помоему не хватает какого то плагина для получения данных:

Код

CSS:

.scrollbar-locked {
			position: relative;
			overflow: hidden;
			width: 100%;
			height: 100%;
			-webkit-overflow-scrolling: auto;
			-ms-touch-action: pan-x;
			touch-action: pan-x;
		}

JS:

var body = $('body');
var ios = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);


var disableScrollTouchStart = function(event) {
	this.allowUp = (this.scrollTop > 0);
	this.allowDown = (this.scrollTop < this.scrollHeight - this.clientHeight);
	this.slideBeginY = event.pageY;
};

var disableScrollTouchMove = function(event) {
	var up = (event.pageY > this.slideBeginY);
	var down = (event.pageY < this.slideBeginY);

	this.slideBeginY = event.pageY;

	if ((up && this.allowUp) || (down && this.allowDown)) {
		event.stopPropagation();
	} else {
		event.preventDefault();
	}
};

var xStart, yStart = 0;

var disableDocumentTouchStart = function(e) {
	xStart = e.touches[0].screenX;
	yStart = e.touches[0].screenY;
};

var disableDocumentTouchMove = function(e) {

	if (ios) {
		if (typeof e.cancelable !== 'boolean' || e.cancelable) {
			e.preventDefault();
			e.stopPropagation();
		}else{
			console.warn('The following event couldn`t be canceled:');
			console.dir(e);
		}

		return false;
	}

	var target = $(e.target);
	if (!target.data('noscroll')) {
		return;
	}

	var xMovement = Math.abs(e.touches[0].screenX - xStart);
	var yMovement = Math.abs(e.touches[0].screenY - yStart);

	if ((yMovement * 3) > xMovement) {
		e.preventDefault();
		e.stopPropagation();
	}
};

var disableScroll = function() {
	if (ios) {
		$('.scrollable').each(function() {
			this.addEventListener('touchstart', disableScrollTouchStart, false);
			this.addEventListener('touchmove', disableScrollTouchMove, false);
		});
	}

	body.addClass('scrollbar-locked');

	document.addEventListener('touchstart', disableDocumentTouchStart, false);
	document.addEventListener('touchmove', disableDocumentTouchMove, false);
};

var enableScroll = function() {
	if (ios) {
		$('.scrollable').each(function() {
			this.removeEventListener('touchstart', disableScrollTouchStart, false);
			this.removeEventListener('touchmove', disableScrollTouchMove, false);
		});
	}

	body.removeClass('scrollbar-locked');

	document.removeEventListener('touchstart', disableDocumentTouchStart, false);
	document.removeEventListener('touchmove', disableDocumentTouchMove, false);
}

[PavelAndreychuk]

Артем Будин, Да, видимо чего-то не хватает т.к. прокрутка страницы не заблокировалась.

[FeST1VaL]

PavelAndreychuk, ну хз, у меня в тестовом файле заблочилась

[PavelAndreychuk]

Артем Будин, в итоге решил одной короткой строкой- calc(100vh - 54px)

[FeST1VaL]

PavelAndreychuk, Ну как вариант для вашего случая, но не универсальный) мой под всякие модалки итд которые не занимают весь экран

[PavelAndreychuk]

Артем Будин, ну дак искал то как раз для своего случая)