html - 修复菜单展开时滚动内容的问题

Question

我试图使移动菜单可滚动，同时在两者都打开时将页面内容保持在固定点。您会注意到通过页面底部滚动菜单的不希望的可见性

JS FIDDLE

    <div class="navigation mobile">
        <div class="menu-wrap">

            <div class="project-tile">
                <div class="copy">
                    <h2><a href="#">Title</a></h2>
                    <a href="#">View project</a>
                </div><!-- /copy -->
            </div><!-- /project-tile -->

            <div class="project-tile">
                <div class="copy">
                    <h2><a href="#">Title</a></h2>
                    <a href="#">View project</a>
                </div><!-- /copy -->
            </div><!-- /project-tile -->

        </div><!-- /menu-wrap -->
    </div><!-- /navigation -->

    <input type="checkbox" id="nav-trigger" class="nav-trigger mobile" />
    <label class="mobile" for="nav-trigger">Menu</label>


<div id="content" class="site-wrap">
Copy</div>

</div>

Answer 1

尝试改变导航元素的位置并添加溢出滚动，就像这样

.navigation
{
   position: fixed;
   overflow-y: scroll;
}

http://jsfiddle.net/x64c1L83/3/