Фиксированное мобильное меню с остановкой скролла | Блог веб-разработчика MaxGraph

Фиксированное мобильное меню с остановкой скролла

Привет! Сегодня у нас лайтовенькая, но довольно важная статья. Покажу скрипт, который будет тормозить скролл сайта при открытии мобильного меню (и на iPhone тоже), ну а при закрытии - возобновлять. Все мы знаем, как непросто на iPhone скролл отключить, но тут максимально простая и рабочая фича. Поехали!

Итак, все делаем через position: fixed и простой скриптец. И да, конечно же, эта фича сработает только для мобильного меню (полноэкранного), ибо иначе будет некрасиво. HTML тут не супер важен, посмотрите на примере

CSS

1
2
3
4
.is-menu-open {
    position: fixed;
    overflow: hidden;
}
.is-menu-open {
	position: fixed;
	overflow: hidden;
}

is-menu-open — класс, который будет добавляться когда меню открыто.

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$('.burger').click(function(e){
    e.preventDefault();
 
    let pagePos = $(window).scrollTop();
    $('body').addClass('is-menu-open').attr('data-scroll', pagePos);
 
    $('.mobile-menu').show();
});
 
 
$('.mobile-menu a').click(function (e) {
    e.preventDefault();
 
    let pos = parseInt($('body').attr('data-scroll'), 10);
 
    $('.mobile-menu').hide();
 
    $('body').removeClass('is-menu-open').removeAttr('data-scroll');
    window.scrollTo(0, pos);
});
$('.burger').click(function(e){
	e.preventDefault();

	let pagePos = $(window).scrollTop();
	$('body').addClass('is-menu-open').attr('data-scroll', pagePos);

	$('.mobile-menu').show();
});


$('.mobile-menu a').click(function (e) {
	e.preventDefault();

	let pos = parseInt($('body').attr('data-scroll'), 10);

	$('.mobile-menu').hide();

	$('body').removeClass('is-menu-open').removeAttr('data-scroll');
	window.scrollTo(0, pos);
});

Собственно, по бургеру открываем меню (стандартные вещи) и сохраняем в переменную pagePos текущую позицию скролла. Затем, уже по закрытию меню мы скроллим сайт на эту же позицию, убирая класс, содержащий position: fixed. И, поскольку меню у нас с фоном (и выше) — внешне ничего не видно, но скролл сохраняется.

 

Вот такая вот мелочь, но довольно полезная мелочь. Надеюсь, кому-то помогло)

Ссылка на DEMO: DEMO

Метки: , ,

Понравилось? Оцени!
12345 (Пока оценок нет)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *