css - 滚动时使移动设备滑入视口(viewport)

Question

我正在编写 WP 主题，遇到问题:

当我在向下滚动页面之前单击汉堡菜单时，我的移动菜单会完美地滑入。但是，如果我向下滚动页面，移动菜单不会滑入 View (我必须向上滚动才能看到它)。

我已经尝试了很多东西(溢出-y:滚动)，但似乎无法让它工作!我能做些什么？ 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%;
}

最后是 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

因此，我为您制作了一个固定标题的快速模型，这样您就可以看到导航栏是如何固定在顶部的。

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

代码实战 ^