在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; 到每當頁面位於屏幕頂部時都會添加的“頂部菜單”類。