Mobile Abgleiten in dem Darstellungsfeld Machen, wenn

Question

gescrollt ich ein WP Thema bin Codierung, und hat ein Problem:

Wenn ich das Hamburger-Menü klicken, bevor Sie die Seite, meine Handy-Menü Dias perfekt nach unten scrollen. Wenn ich jedoch die Seite herunterscrolle, gleitet das mobile Menü nicht in die Ansicht (ich muss zurück scrollen, um es zu sehen).

Ich habe eine Reihe von Dingen ausprobiert (overflow-y: scroll), aber es scheint nicht zu funktionieren! Was kann ich tun? Javascript?

HTML/PHP:

<nav class="navbar navbar-fixed-top navbar-light"> 
     <div class="container">  
       <a class="navbar-brand" href="#"> 
        <img src="<?php bloginfo('template_directory');?>/img/fullLogo.png" class="fluid-img pull-md-left" id="navLogo"> 
       </a> 

       <div class="hidden-sm-down"> 
        <?php 
        $mobileMenu = array(
         'sort_column' => 'menu_order', 
         'container' => false, 
         'theme_location' => 'mobile_menu', 
         'menu_class' => 'desktop-nav', 
         'container_id' => 'desktopNavContainer', 
        ); 
        wp_nav_menu($mobileMenu); 
        ?> 
       </div> 

       <a> 
        <button type="button" id="hamburger" class="pull-right hidden-md-up"> 
         &#9776; 
        </button> 
       </a> 
     </div> 
     </nav> 
    <div id="mobileMenu"> 
     <button type="button" id="mobileMenuCloseButton" class="pull-right"> 
      &#735; 
     </button> 
     <div id="mobileNavWrapper"> 
      <?php 
       $mobileMenu = array(
        'sort_column' => 'menu_order', 
        'container' => false, 
        'theme_location' => 'mobile_menu', 
        'menu_class' => 'mobile-menu', 
        'container_id' => 'mobileNavContainer', 
       ); 
       wp_nav_menu($mobileMenu); 
      ?> 
     </div> 
    </div> 

CSS:

/******** NAVIGATION ************/ 

#mobileMenu{ 
    display: none; 
    position: relative; 
    z-index: 10000; 
    top: 0; 
    background-color: rgba(0,0,0,.95); 
    width: 100%; 
    font-size: 3em; 
    text-align: center; 
    overflow-y: scroll; 
} 

#mobileNavWrapper{ 
    margin-bottom: 70%; 
} 

#mobileMenuCloseButton{ 
    font-size: 2em; 
    color: white; 
    position: absolute; 
    top: -25px; 
    right: 9%; 
} 

und schließlich die JS:

/* ----------- MOBILE MENU APPEAR --------------- */ 
    $('#hamburger').click(function(){ 
     console.log('got it'); 
     $('#mobileMenu').slideDown(400); 
    }); 

    $(window).scroll(function(){ 
     if ($(window).scrollTop() > 600){ 
      $('#mobileNav').addClass('menuScrolled'); 
     } else{ 
      $('#mobileNav').removeClass('menuScrolled'); 
     } 
        }); 

Answer 1

So habe ich Ihnen eine schnelle Mock aufgebaut aus einer festen Header, so können Sie sehen, wie die Navigationsleiste an der Spitze bleibt.

HTML:

<nav class="mobile-header"> 
     <ul> 
     <!-- I'll leave this empty for now --> 
     </ul> 
     <div class="hamburger"> 
     <i class="fa fa-bars fa-2x"></i> 
     </div> 
    </nav> 

CSS:

.mobile-header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 75px; 
    background-color: rgba(0, 0, 0, 0.8); 
} 

.hamburger { 
    position: absolute; 
    top: 20px; 
    right: 20px; 
} 

http://codepen.io/zsawaf/pen/xOWONq

-Code in Aktion^