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;到每当页面位于屏幕顶部时都会添加的“顶部菜单”类。

在iOS上向上滚动后，页面导航菜单隐藏在页面顶部

1 个答案: