iOSで上にスクロールした後、ページナビゲーションメニューがページの上部に隠れています

debugcn 投稿 Dev

マイケル

下にスクロールすると非表示になり、上にスクロールすると元に戻るナビゲーションメニューを作成したいと思います。デスクトップと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>

マイケル

トップを追加することでこれを解決することができました：0; ページが画面の上部に表示されるたびに追加されるクラス「menu-on-top」に。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]