Блог

Я хочу создать меню навигации, которое скрывается после прокрутки вниз и появляется после прокрутки вверх. Все работает нормально в браузерах для настольных компьютеров и 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>
 

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