1. 首頁
  2. 問答
  3. 覆蓋導航不包括頁面上的所有元素

覆蓋導航不包括頁面上的所有元素

2015-07-10 79 views
0

我有一點困難讓覆蓋導航覆蓋頁面內的所有元素。當我爲頁面內的單個部分創建容器或行時，疊加層似乎不覆蓋。覆蓋導航不包括頁面上的所有元素

下面的代碼，並鏈接到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"); 
    }     
});

來源

2015-07-10 therealtomhanks

回答

0

只需添加一個Z-指數.overlay

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

來源

2015-07-10 15:55:19 user3495764

+0

謝謝！而已！ – therealtomhanks

相關問題

 相關問題