Как избавиться от бага фиксированного меню на мобильных устройствах?

Question

[Александр Пономаренко]

У меня меню. Оно открывается на весь экран по клику и имеет свойство fixed. На устройствах с большим разрешением экрана работает все отменно, но на мобильных при скролле появляется баг. Заключается он в следюущем: У мобильных браузеров есть верхняя панель, которая исчезает при скролле, так вот, когда я открываю меню и начинаю скроллить, в момент когда скрывается верхняя панель браузера внизу появляется незаполненная область моего меню, равна высоте как раз таки той верхней панели. Перепробовал много способов, добился результата на android, но ios не одобрил. В общем выручайте. Я в печали(

$('.menu').click(function() {
			$(this).toggleClass('active');
			$('#overlay').toggleClass('open');
                       
                       //Кое как работает на android

			var bg = jQuery("#overlay");
			jQuery(window).resize("resizeBackground");
			function resizeBackground() {
				bg.height(jQuery(window).height() + 60);
			}
			resizeBackground();
		});

Answer 1

[Александр Рогачев]

Так может функцию не на resize вещать, а на скролл?
И почему не сделать меню через css на весь экран, т.е. left:0, top:0, bottom:0, right:0 если оно fixed?

Answer 2

[Александр Алексеев]

грубо говоря у fixed-меню стили
display: fixed;
margin: auto;
top: 0;
left: 0;
bottom: 0;
//растягиваем на всю высоту и прижимаем влево

сделайте bottom: -100px; padding-bottom: 100px;
получится что оно будет длиннее экрана но из за padding контент будет по высоте экрана

Comments

[Александр Пономаренко]

Тоже хорошее решение, спасибо :)