我打开的菜单div后面的div滚动时，它应该保持放

Question

在iPhone上的Safari a.container div位于导航菜单后面.div在菜单div内滚动时滚动，即使菜单覆盖顶部的内容div。

这只发生在iPhone上，我不确定它是否与我听说过的所谓overscroll有关？

HTML导航

<button class="c-hamburger c-hamburger--htx"> 
    <span>toggle menu</span> 
</button> 
<nav id="sidebar" class="nav-container"> 
<!--Menu icon--> 

<!--Widget area--> 
<?php if (is_active_sidebar('home_left_1')) : ?> 
    <div id="primary-sidebar" class="nav-container primary-sidebar widget-area" role="complementary"> 

     <?php dynamic_sidebar('home_left_1'); ?> 
    </div><!-- #primary-sidebar --> 
<?php endif; ?> 

<!--Menu js--> 
<script> 
    (function() { 

    "use strict"; 

    var toggles = document.querySelectorAll(".c-hamburger"); 

    for (var i = toggles.length - 1; i >= 0; i--) { 
     var toggle = toggles[i]; 
     toggleHandler(toggle); 
    }; 

    function toggleHandler(toggle) { 
     toggle.addEventListener("click", function(e) { 
     e.preventDefault(); 
     (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active"); 
     }); 
    } 

    })(); 

    $('.c-hamburger').click(function() { 
    $("#sidebar").toggleClass("show"); 
    }); 


</script> 

</nav> 

HTML主索引

<?php get_header(); ?> 

<?php get_sidebar(); ?> 

<div id="main" class="content"> 
    <div id="content" class="content-container"> 
     <section> 
      <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
      <p><?php the_content(__('(more...)')); ?></p> 
      <?php endwhile; else: ?> 
      <p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?> 
     </section> 
    </div> 
</div> 

<div id="delimiter"></div> 

<?php get_footer(); ?> 

CSS

这里甚至被打开在导航的div时滚动内容的div它在一个ñiPhone

/* Content area 
–––––––––––––––––––––––––––––––––––––––––––––––––– */ 
.content {padding-left: 20rem;} 

.content-container { 
    display: block; 
    margin: 0px auto; 
    max-width: 78rem; 
    text-align: left; 
    padding: 0 4rem 0 4rem; 
} 

.content-container section {padding: 1.25rem;} 

这里是我的导航DIV + CSS，但要记住的媒体查询我还包括覆盖一些这个CSS的大小发生我遇到一个问题

/* Nav 
–––––––––––––––––––––––––––––––––––––––––––––––––– */ 
nav { 
    position: fixed; 
    width: 20rem; 
    text-align: center; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    background-color: white; 
    opacity: 1; 
    overflow-y:auto; 
    padding-bottom: 4rem; 
    transition: opacity .3s ease-in-out; 
    -moz-transition: opacity .3s ease-in-out; 
    -webkit-transition: opacity .3s ease-in-out; 
    z-index: 8; 
} 

/*hides sidebar for mobile breakpoints*/ 
nav.show {opacity: 1; pointer-events: all;} 

nav .nav-container { 
    display: inline-block; 
    padding-top: 5rem; 
    width: 50%; 
    text-align: left; 
} 

下面是大小媒体查询具有全屏幕菜单：

/*xx small*/ 
@media (min-width: 0px) and (max-width: 600px) { 
    html {font-size: 10.5px;} 

    .content {padding-left: 0;} 
    .content-container {padding: 0 1.5rem 0 1.5rem;} 

    .c-hamburger {display: block;} 

    nav {height: 100%; pointer-events: none; opacity: 0; width: 100%;} 
    nav .nav-container {float: left; padding: 9rem 0 0 6rem;} 
    nav a {font-size: 1.83rem;} 
    nav #logo {height: 4rem; width: 4rem; margin-bottom: 4rem;} 

    p {font-size: 1.83rem; font-weight: 300; line-height: 2.7rem;} 
    p, h2 {width: 100%;} 
    h1 {padding-top: 8rem;} 
    /*give h2 intro some space*/ 
    h2 + h3 {padding-top: 5rem;} 

    h2 + h4 {padding-top: 5rem;} 

    h2 + p {padding-top: 5rem;} 
} 

谢谢你的帮助！

Answer 1

你只需要放一个固定的位置，以该div 或者你可以把绝对的位置，如果你需要代父DIV的浮动DIV

.content-container { 
    display: block; 
    margin: 0px auto; 
    max-width: 78rem; 
    text-align: left; 
    position:fixed;//absolute for floating 
    padding: 0 4rem 0 4rem; 
}