javascript - 覆盖导航不覆盖页面上的所有元素

Question

我在让叠加导航覆盖页面中的所有元素时遇到了一些麻烦。当我为页面中的单个部分创建容器或行时，叠加层似乎没有覆盖。

这是代码和 codepen 的链接 http://codepen.io/anon/pen/aOGYdy

HTML

<div class="button_container" id="toggle">
  <span class="top"></span>
  <span class="middle"></span>
  <span class="bottom"></span>
</div>



<div class="overlay" id="overlay">
  <nav id="topNav" class="overlay-menu">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#about">Work</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</div>


<section id="home">
<div class="container content-section">
<div class="col-md-12 intro-text no-padding">
                <div class="col-md-5 intro-heading">Hello, I'm <div class="intro-heading blue">Tom<font color="#333">.</font>
                    </div>


  <div ng-app="typeApp">
          <section ng-controller="typeController" class="content">
            <h2 ng-class="{typing: isTyping}">I'm {{ something }}<span class="cursor">&nbsp;</span></h2>
          </section>
          </div>
          </div>
          <div class="col-md-7">
          <img src="http://i.imgur.com/GRLosqO.png" class="img-responsive align="right" " alt="">
        </div>
        </div>
        </div>
        </section>
</section>

<section id="about">
  <h1>About</h1>
</section>
<section id="contact">
  <p>Contact</p>
</section>

CSS

html, body {
  height: 100%;
   margin: 0;
     font-size: 21px;
}

/* TYPE */
h1 {
  font-size: 2.7em;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -2px;
  color: #222; 
  margin-bottom: .3em;
}

h2 {
  font-weight: 200;
  -webkit-text-stroke: 1px rgba(0,0,0,0.1);
}

h2 span.cursor {
  display: inline-block;
  background: #333;
  margin-left: 1px;
  width: .05em;

  animation: blink 2s linear 0s infinite;
}

h2.typing span.cursor {
  animation: none;
}

@keyframes blink {
  0%   { background: #FFF }
  47%  { background: #FFF }
  50%  { background: #333 }
  97%  { background: #333 }
  100% { background: #FFF }
}

/* SECTIONS */
html, body {
  height: 100%;
   margin: 0;
   padding: 0;
  margin:0;
}

section {
  height: 100%;
  width: 100%;
  display: table;

}
#home {
  background-color: #ffffff;
}
#portfolio {
  background-color: #1abc9c;
}
#about {
  background-color: #e67e22;
}
#contact {
  background-color: #22a7f0;
}

p {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font: 700 3em/1 'Open Sans', sans-serif;
  text-shadow: 0.1em 0.1em rgba(0, 0, 0, 0.2);
  color: #fff;
}

.container {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 40%;
  left: 0;
  margin: 0 auto;
  font-family: 'Roboto', sans-serif;
}
.container p {
  font-size: 20px;
}
.container a {
  display: inline-block;
  position: relative;
  text-align: center;
  color: #35B0FC;
  text-decoration: none;
  font-size: 20px;
  overflow: hidden;
  top: 5px;
}
.container a:after {
  content: '';
  position: absolute;
  background: #FF5252;
  height: 2px;
  width: 0%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  left: 50%;
  bottom: 0;
  -webkit-transition: .35s ease;
          transition: .35s ease;
}

.container a:hover:after, .container a:focus:after, .container a:active:after {
  width: 100%;
}


.button_container {
  position: fixed;
  top: 3%;
  right: 3%;
  height: 25px;
  width: 35px;
  cursor: pointer;
  z-index: 100;
  -webkit-transition: opacity .25s ease;
          transition: opacity .25s ease;
}
.button_container:hover {
  opacity: .7;
}
.button_container.active .top {
  -webkit-transform: translateY(11px) translateX(0) rotate(45deg);
      -ms-transform: translateY(11px) translateX(0) rotate(45deg);
          transform: translateY(11px) translateX(0) rotate(45deg);
  background: #FFF;
}
.button_container.active .middle {
  opacity: 0;
  background: #FFF;
}
.button_container.active .bottom {
  -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
      -ms-transform: translateY(-11px) translateX(0) rotate(-45deg);
          transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #FFF;
}
.button_container span {
  background: black;
  border: none;
  height: 5px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all .35s ease;
          transition: all .35s ease;
  cursor: pointer;
}
.button_container span:nth-of-type(2) {
  top: 11px;
}
.button_container span:nth-of-type(3) {
  top: 22px;
}

.overlay {
  position: fixed !important;
  background: #22a7f0;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .35s, visibility .35s, height .35s;
          transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
}
.overlay.open {
  opacity: .9;
  visibility: visible;
  height: 100%;
}
.overlay.open li {
  -webkit-animation: fadeInRight .5s ease forwards;
          animation: fadeInRight .5s ease forwards;
  -webkit-animation-delay: .35s;
          animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
  -webkit-animation-delay: .4s;
          animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: .45s;
          animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: .50s;
          animation-delay: .50s;
}
.overlay nav {
  position: relative;
  height: 70%;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 50px;
  font-family: 'Vollkorn', serif;
  font-weight: 400;
  text-align: center;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}
.overlay ul li {
  display: block;
  height: 25%;
  height: calc(100% / 4);
  min-height: 50px;
  position: relative;
  opacity: 0;
}
.overlay ul li a {
  display: block;
  position: relative;
  color: #FFF;
  text-decoration: none;
  overflow: hidden;
}

/*
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
  width: relative;
}
*/

.overlay ul li a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 3px;
  background: #FFF;
  -webkit-transition: .35s;
          transition: .35s;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

JavaScript

//nav toggle
$('#toggle').click(function() {
  $(this).toggleClass('active');
  $('#overlay').toggleClass('open');
});
$("nav li").click(function() {
  $('#overlay').toggleClass('open');
  $('#toggle').toggleClass('active');
});

//pages size
(function () {
    var px, sections, speed, wait;
    sections = document.getElementsByTagName('section');
    px = 100;
    speed = 0.5;
    wait = 2000;
    $(window).on('scroll', function () {
        clearTimeout($.data(this, 'timer'));
        return $.data(this, 'timer', setTimeout(function () {
            var i, results, sectionY, time, windowY;
            windowY = $(window).scrollTop();
            i = sections.length - 1;
            results = [];
            while (i >= 0) {

                if (sectionY - px < windowY && windowY < sectionY + px) {
                    time = Math.abs(windowY - sectionY) / speed;
                    $(document.body).animate({ scrollTop: sectionY }, time, 'swing');
                }
                results.push(i--);
            }
        }, wait));
    });
}.call(this));

//slide
// Cache selectors
var lastId,
    topMenu = $("#topNav"),
    topMenuHeight = topMenu.outerHeight(),
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });

// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
  var href = $(this).attr("href"),
      o = href === "#" ? 0 : $(href).offset().top-topMenuHeight+15;
  $('html, body').stop().animate({ 
      scrollTop: o
  }, 800);
  e.preventDefault();
});

// Bind to scroll
$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop()+topMenuHeight;

   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";

   if (lastId !== id) {
       lastId = id;
       // Set/remove active class
       menuItems
         .parent().removeClass("active")
         .end().filter("[href=#"+id+"]").parent().addClass("active");
   }                   
});

Answer 1

只需在 .overlay 中添加一个 z-index

http://codepen.io/anon/pen/oXdqYy

 .overlay {
  position: fixed !important;
  background: #22a7f0;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .35s, visibility .35s, height .35s;
          transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
  z-index: 99;
}