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