sticky navbar не работает на мобильных устройствах при прокрутке

Question

Я создал клейкий навигатор для subnav, который должен находиться в верхней части экрана, когда пользователь прокручивается вниз. Поэтому я пробовал использовать javascript, который меняет положение на «фиксированный», когда вершина достигнута. Избегая пробела в содержимом, когда navbar выведен из потока, я также добавил местозаполнитель, который имеет ту же высоту, что и navbar.

На рабочем столе это действительно работает и выглядит так, как должно быть. Но у меня проблема с «прикосновением» к мобильному виду. Когда я просматриваю мобильный вид, навигационная панель не будет отображаться во время прокрутки над точкой обзора, где изменяется класс css. Он появляется только после прекращения прокрутки после этой точки обзора. Когда он появляется, я могу нормально прокручивать вверх и вниз, и я снова получаю эту проблему, если повторю эту процедуру, когда navbar должен изменить класс css. Таким образом, это может быть проблемой с изменением класса css, и я думаю, проблема может быть в фрагменте javascript. Кто-нибудь знает решение для этого? Я хотел бы иметь такое же поведение, как на рабочем столе, поэтому навигационная панель всегда видна и просто фиксируется на самой верхней части экрана, даже если она находится в потоке прокрутки.

JS:

var menu = document.querySelector('#irp-localnav'); 
var menuPosition = menu.getBoundingClientRect(); 
var placeholder = document.createElement('div'); 
placeholder.style.width = menuPosition.width + 'px'; 
placeholder.style.height = menuPosition.height + 'px'; 
var isAdded = false; 

window.addEventListener('scroll', function() { 
if (window.pageYOffset >= menuPosition.top && !isAdded) { 
    menu.classList.add('sticky'); 
    menu.parentNode.insertBefore(placeholder, menu); 
    isAdded = true; 
} else if (window.pageYOffset < menuPosition.top && isAdded) { 
    menu.classList.remove('sticky'); 
    menu.parentNode.removeChild(placeholder); 
    isAdded = false; 
} 
}); 

Если вы угадаете ошибку в HTML/CSS-разметки, просто дайте мне знать, так что я могу связаться с вами снова, отправляя эту разметку

С наилучшими пожеланиями

Answer 1

Я смог взломать. Для тех, кто сталкивается с аналогичной проблемой:

Мобильные браузеры просто не запускаются при событии прокрутки, а событие находится в процессе. Они срабатывают, когда событие останавливается, поэтому, когда вы остановили прокрутку. Использование translate3d (0px, 0px, 0px) может решить эту проблему. Обратитесь к этой теме, чтобы узнать больше об этом:

iOS 9 Safari: changing an element to fixed position while scrolling won't paint until scroll stops

С наилучшими пожеланиями!