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

Question

I want to make a navigation menu that hiddes after scrolling down and appears back after scrolling up. Everything is working fine on desktop and Android browsers. Problem occours on iOS devices. When you scroll up to the top of the page and release menu hides.

I only found old answers to problem with menu not showing at all on scrolling up, but that should not be a problem with newer versions of 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

I managed to resolve this by adding a top: 0; to a class "menu-on-top" that was added every time page was on the top of the screen.