CODEWITHSUNDEEP
javascripthtmlioscsstwitter-bootstrap
Michael
Michael

Reputation: 21

Page navigation menu is hidding on the top of the page after scroll up on iOS

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>

Upvotes: 0

Views: 97

Answers (1)

Michael
Michael

Reputation: 21

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.

Upvotes: 1

Related Questions