我的标题出现在我的叠加菜单前面时出现问题，该菜单会在点击汉堡包时出现。我尝试应用更高的z-index，但这没有用。
任何建议都会很棒。
http://codepen.io/Dingerzat/pen/ZBEEyM
/*!
* classie v1.0.0
* class helper functions
* from bonzo https://github.com/ded/bonzo
* MIT license
*
* classie.has( elem, 'my-class' ) -> true/false
* classie.add( elem, 'my-new-class' )
* classie.remove( elem, 'my-unwanted-class' )
* classie.toggle( elem, 'my-class' )
*/
/*jshint browser: true, strict: true, undef: true, unused: true */
/*global define: false */
( function( window ) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg( className ) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) {
hasClass = function( elem, c ) {
return elem.classList.contains( c );
};
addClass = function( elem, c ) {
elem.classList.add( c );
};
removeClass = function( elem, c ) {
elem.classList.remove( c );
};
}
else {
hasClass = function( elem, c ) {
return classReg( c ).test( elem.className );
};
addClass = function( elem, c ) {
if ( !hasClass( elem, c ) ) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function( elem, c ) {
elem.className = elem.className.replace( classReg( c ), ' ' );
};
}
function toggleClass( elem, c ) {
var fn = hasClass( elem, c ) ? removeClass : addClass;
fn( elem, c );
}
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
// transport
if ( typeof define === 'function' && define.amd ) {
// AMD
define( classie );
} else {
// browser global
window.classie = classie;
}
})( window );
( function () {
var $navUL = $( 'nav ul' );
$( '.hamburger-menu' ).on( 'click', function () {
$( this ).toggleClass( 'show' );
$navUL.toggleClass( 'hidden' );
} );
} )();
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
classie.add(header,"smaller");
} else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();@import "compass/css3";
$bar-width: 50px;
$bar-height: 4px;
$bar-spacing: 15px;
body {
background: #000000;
font-family: Teko;
color: #ffffff;
}
header .hamburger-menu {
position: fixed;
z-index: 1;
top: 45px;
left: 45px;
margin: auto;
width: $bar-width;
height: $bar-height + $bar-spacing*2;
cursor: pointer;
}
.text {
margin-left: 60px;
font-size: 18px;
letter-spacing: .05em;
color: #ffffff;
-webkit-transform: translateX(0);
transition: all 350ms ease-in-out;
vertical-align: middle;
position: relative;
z-index: 1;
}
.show .text {
opacity: 0;
transform: translateX( -10px );
}
.bar,
.bar:after,
.bar:before {
width: $bar-width;
height: $bar-height;
}
.bar {
position: relative;
z-index: 1;
transform: translateY($bar-spacing);
background: rgba(188, 49, 254, 1);
transition: all 0ms 300ms;
.show & {
background: rgba(255, 255, 255, 0);
}
}
.bar:before {
content: "";
position: fixed;
z-index: 1;
left: 0;
bottom: $bar-spacing;
background: rgba(188, 49, 254, 1);
transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.bar:after {
content: "";
position: fixed;
z-index: 1;
left: 0;
top: $bar-spacing;
background: rgba(188, 49, 254, 1);
transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.show .bar:after {
top: 0;
transform: rotate(45deg);
background: rgba(0, 0, 0, 1);
transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
}
.show .bar:before {
bottom: 0;
transform: rotate(-45deg);
background: rgba(0, 0, 0, 1);
transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
}
.overlay {
position: fixed;
border-style: solid;
border-width: 1em;
border-color: black;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #333;
background-color: #bc31fe;
}
nav ul, li {
margin: 0;
padding: 0;
font-family: Teko;
font-weight: bold;
font-size: 0.8em;
list-style: none;
text-align: center;
}
nav ul {
position: fixed;
top: 50%;
text-align: center;
&.hidden {
display: none;
}
a {
@include transition-duration(0.5s);
text-decoration: none;
color: white;
font-size: 3em;
line-height: 1.5;
}
}
nav ul li {
display: inline;
margin: 0 0.5rem;
}
.overlay .contacts {
position: fixed;
bottom: 37px;
left: 0;
right: 0;
padding-bottom: 15px;
text-align: center;
letter-spacing: .01em;
z-index: 2;
}
.contacts {
font-size: 16px;
line-height: 1.5;
color: #10131a;
letter-spacing: .1em;
text-transform: uppercase;
font-weight: 700;
text-align: center;
}
.bigtext {
font-size: 50em;
}
header {
width: 100%;
height: 150px;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 999;
background-color: #0683c9;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
-ms-transition: height 0.3s;
-o-transition: height 0.3s;
transition: height 0.3s;
}
header h1#logo {
display: inline-block;
height: 150px;
line-height: 150px;
float: center;
font-family: "Oswald", sans-serif;
font-size: 60px;
color: white;
font-weight: 400;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
header nav {
display: inline-block;
float: right;
}
header nav a {
line-height: 150px;
margin-left: 20px;
color: #9fdbfc;
font-weight: 700;
font-size: 18px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
header nav a:hover {
color: white;
}
header.smaller {
height: 110px;
}
header.smaller h1#logo {
width: 150px;
height: 75px;
line-height: 75px;
font-size: 30px;
}
header.smaller nav a {
line-height: 75px;
}
@media all and (max-width: 660px) {
header h1#logo {
display: block;
float: none;
margin: 0 auto;
height: 100px;
line-height: 100px;
text-align: center;
}
header nav {
display: block;
float: none;
height: 50px;
text-align: center;
margin: 0 auto;
}
header nav a {
line-height: 50px;
margin: 0 10px;
}
header.smaller {
height: 75px;
}
header.smaller h1#logo {
height: 40px;
line-height: 40px;
font-size: 30px;
}
header.smaller nav {
height: 35px;
}
header.smaller nav a {
line-height: 35px;
}
}<link href="https://fonts.googleapis.com/css?family=Teko" rel="stylesheet">
<header>
<div class="container clearfix">
<h1 id="logo">
LOGO
</h1>
<div class="hamburger-menu">
<div class="bar"></div>
<div class="text">MENU</div>
</div>
</div>
</header><!-- /header -->
<nav>
<ul role="navigation" class="overlay hidden">
<li><a href="#">WORK</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">RESUME</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<div class="contacts">
<address>someperson@somewhere.com</address>
</div>
<div class="bigtext">THIS IS PLACEHOLDER</div>
答案 0 :(得分：1)
您可以尝试在叠加区域添加一些边距：
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
classie.add(header,"smaller");
$('.overlay').css('marginTop',110);
} else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
$('.overlay').css('marginTop',150);
}
}
});
}
答案 1 :(得分：0)