Как скрыть меню при прокрутке на iPhone?

Question

[Алексей Эвлайт]

Спасибо, что обратили внимание на мой вопрос!

Прошу не пинать, не материть и не впадать в уныние от увиденного кода.
Опыта в верстке, jQuery и JS практически нет вообще - самая база.

Ситуация следующая.

Имею jQuery-код:

var lastScrollTop = 0;

jQuery(window).scroll(function(event) {
    var st = jQuery(this).scrollTop();

    if (st > lastScrollTop && st > jQuery('#frontpage').outerHeight(true) + jQuery('header').outerHeight(true)) {
            jQuery('header').css('opacity', '0');
            jQuery('header').css('z-index', '0');
        }
        else {
            jQuery('header').css('opacity', '1');
            jQuery('header').css('z-index', '1');
        }

    lastScrollTop = st;
});

При скролле вниз и после определенной высоты скрывается header с меню, а при скролле вверх, меню отображается.

На Android, в Edge, Chrome, Mozilla все прекрасно срабатывает.

Но это... не работает на iPhone. Задачу поставили "почини скрытие меню на Iphone".
Проверяю в инспекторе - в адаптивке под iPhone тоже не работает, а для android устройств и просто Responsive все работает отлично.

Убил целый день, на поиск инфы, различные манипуляции... Без толку.

При этом есть скрипт на изменение высоты блока, а также переназначение ее при ресайзе. Этот скрипт работает и на iOs

Пробовал window.addEventListener - не работает.

Нашел информацию, что на iphone не работает само событие скролла.

Заметил также забавную штуку, что после открытия модального окошка через кнопку (заказ обратного звонка) в инспекторе хрома скрытие меню начинает работать. На реальном iPhone не тестил...

Как сие победить?

Answer 1

[Exploding]

Вот так надо:

jQuery(document).on("touchstart", function(e) {

    //Кручу-верчу, ... Показываем, скрываем... Где шарик? Вот он шарик!
    // И всё-таки может не opacity скрывайте, а другим чем то?
    // А то получается: видишь меню? Нет, не видишь? А оно есть!))
});

Comments

[Алексей Эвлайт]

Конечное, согласен, что скрывать через opacity достаточно странно. Но какой уж код попался.
Перепишем после.

По крайней сере в инспекторе Хрома и в эмуляторе appetize.io чуда не случилось. Делал так

var lastScrollTop = 0;

jQuery(document).on('touchstart', function(e) {
...
});

[Exploding]

Алексей Эвлайт, ну я так понимаю, что троеточие тут это условно?)) А то мало ли)
События можно узнать не одно а через пробел список всех что надо
jQuery(document).on('touchstart scroll, function(e) {

Ну и т.д.

[Алексей Эвлайт]

Exploding, да, конечно, троеточие - это был скрытый код выполняемый)

На самом деле проблему удалось решить, когда я пересмотрел всю верстку. Предыдущий "специалистЪ" добавил для body фреймового окна overflow - hidden, не указав каких-либо доп классов.

Вышла запись
BODY {overflow: hidden;}

Что мешало запускаться этому скрипту.

Я писал:

Заметил также забавную штуку, что после открытия модального окошка через кнопку (заказ обратного звонка) в инспекторе хрома скрытие меню начинает работать.

Это и помогло разобраться, просто пришлось глубже капнуть. Убрал правило - все заработало.

На Iphone тестировал - все Ок