Question

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

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

我尝试了很多东西（overflow-y：scroll），但似乎无法让它工作！我能做什么？的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：

dart:mirrors

CSS：

<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>

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

代码在行动^

滚动时将移动幻灯片移动到视口中

1 个答案: