Меню навигации по страницам скрывается в верхней части страницы после прокрутки вверх на iOS

Question

Я хочу создать навигационное меню, которое скрывается после прокрутки вниз и появляется снова после прокрутки вверх.Все отлично работает в настольных и Android-браузерах.Проблема происходит на устройствах iOS.Когда вы прокручиваете вверх до верхней части страницы и открываете меню, оно скрывается.

Я нашел только старые ответы на проблему с меню, которое вообще не отображается при прокрутке вверх, но это не должно быть проблемой с более новыми версиями Safari..

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;

  if (prevScrollpos > currentScrollPos) {
    document.getElementById("main-header").style.top = "0";
  } else {
    document.getElementById("main-header").style.top = "-90px";
  }
    prevScrollpos = currentScrollPos;
};

<header class="main-header container-fluid menu-on-top" id="main-header">
  <div class="row">
    <div class="container fixposition">
      <nav class="navbar navbar-toggleable-lg navbar-light bg-faded navbar-expand-xl ">
        <button id="button-nav" class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#menu-nawigacyjne" aria-controls="menu-nawigacyjne" aria-expanded="false" aria-label="Toggle navigation">

		<a class="navbar-brand d-flex align-items-center" href="<?php echo esc_url( home_url( '/' ) ); ?>"></a>

		<div class="collapse navbar-collapse primary-menu m-auto" id="menu-nawigacyjne">
			<?php if ( has_nav_menu( 'primary' ) ) : ?>
							<?php
							wp_nav_menu( array(
								'theme_location' => 'primary',
								'items_wrap' => '<ul class="nav navbar-nav m-auto">%3$s</ul>'
							) );
							?>
						<?php endif; ?>
					</div>
				</nav>
			</div>
		</div>
	</header>

<!-- My header -->
<header class="main-header container-fluid menu-on-top" id="main-header">
        <div class="row">
            <div class="container fixposition">
                <nav class="navbar navbar-toggleable-lg navbar-light bg-faded navbar-expand-xl ">
                    <button id="button-nav"  class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#menu-nawigacyjne" aria-controls="menu-nawigacyjne" aria-expanded="false" aria-label="Toggle navigation">

                    <a class="navbar-brand d-flex align-items-center" href="<?php echo esc_url( home_url( '/' ) ); ?>"></a>

                    <div class="collapse navbar-collapse primary-menu m-auto" id="menu-nawigacyjne">
                        <?php if ( has_nav_menu( 'primary' ) ) : ?>
                            <?php
                            wp_nav_menu( array(
                                'theme_location' => 'primary',
                                'items_wrap' => '<ul class="nav navbar-nav m-auto">%3$s</ul>'
                            ) );
                            ?>
                        <?php endif; ?>
                    </div>

                </nav>
            </div>
        </div>
    </header>

Answer 1

Мне удалось решить эту проблему, добавив top: 0; к классу «меню сверху», который добавлялся каждый раз, когда страница находилась в верхней части экрана.