我目前正在做我的这个网站项目，我遇到了麻烦。我注意到，导航触发按钮(导航左上角的汉堡按钮(只有在页面开始时才起作用，但只要我向下滚动几个像素，它就不会对任何点击做出响应。我在代码中到处都找过了，但也许我只需要另一双眼睛来查看代码，看看我可能没有发现的东西。
function closeSideBar() {
document.getElementById('mysidebar').style.width='0px';
document.getElementById('navigation').style.marginLeft='0px';
document.getElementById('content').style.transform="translateX(0px)";
}
function openSideBar(){
document.getElementById('mysidebar').style.width='190px';
document.getElementById('navigation').style.marginLeft='190px';
document.getElementById('content').style.transform="translateX(190px)";
}
function sideBar() {
if(document.getElementById('mysidebar').style.width==="190px"){
closeSideBar();
}
else{
openSideBar();
}
}
const maino = document.getElementById('container');
maino.addEventListener('click', function () {
if (document.getElementById('mysidebar').style.width==="190px") {
closeSideBar();
}
});
$(document).ready(function(){
$("#jumboref1").hover(function(){
$("#smallref1").css("color", "#E7AD9C");
}, function(){
$("#smallref1").css("color", "#efefef");
});
$("#jumboref2").hover(function(){
$("#smallref2").css("color", "#E7AD9C");
}, function(){
$("#smallref2").css("color", "#efefef");
});
$("#jumboref3").hover(function(){
$("#smallref3").css("color", "#E7AD9C");
}, function(){
$("#smallref3").css("color", "#efefef");
});
$("#jumboref4").hover(function(){
$("#smallref4").css("color", "#E7AD9C");
}, function(){
$("#smallref4").css("color", "#efefef");
});
$("#jumboref5").hover(function(){
$("#smallref5").css("color", "#E7AD9C");
}, function(){
$("#smallref5").css("color", "#efefef");
});
$("#jumboref6").hover(function(){
$("#smallref6").css("color", "#E7AD9C");
}, function(){
$("#smallref6").css("color", "#efefef");
});
$("#jumboref7").hover(function(){
$("#smallref7").css("color", "#E7AD9C");
}, function(){
$("#smallref7").css("color", "#efefef");
});
$("#smallref1").hover(function(){
$("#jumboref1").css("color", "#e7ad9c");
}, function(){
$("#jumboref1").css("color", "#232323");
});
$("#smallref2").hover(function(){
$("#jumboref2").css("color", "#E7AD9C");
}, function(){
$("#jumboref2").css("color", "#232323");
});
$("#smallref3").hover(function(){
$("#jumboref3").css("color", "#E7AD9C");
}, function(){
$("#jumboref3").css("color", "#232323");
});
$("#smallref4").hover(function(){
$("#jumboref4").css("color", "#E7AD9C");
}, function(){
$("#jumboref4").css("color", "#232323");
});
$("#smallref5").hover(function(){
$("#jumboref5").css("color", "#E7AD9C");
}, function(){
$("#jumboref5").css("color", "#232323");
});
$("#smallref6").hover(function(){
$("#jumboref6").css("color", "#E7AD9C");
}, function(){
$("#jumboref6").css("color", "#232323");
});
$("#smallref7").hover(function(){
$("#jumboref7").css("color", "#E7AD9C");
}, function(){
$("#jumboref7").css("color", "#232323");
});
$("#slide-down").hover(function (){
$("#label").css("opacity", "1");
$("#label").css("transform", "translate3d(0,1.5rem,0)");
},function (){
$("#label").css("opacity", "0");
$("#label").css("transform", "translate3d(0,0,0)");
});
});@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;400&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-weight: 200;
}
body{
font-family: 'Raleway', sans-serif;
background-color: #efefef;
}
.navigation{
width: 100%;
height: 3.5rem;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 1.5rem;
align-items: center;
align-content: center;
background-color: rgba(0,0,0,.92);
backdrop-filter: blur(20px) saturate(100%);
color: #efefef;
position: fixed;
top: 0;
transition: 0.3s;
}
.openbtn {
background-color: rgba(0,0,0,0);
border: none;
cursor: pointer;
}
.openbtn:focus {
border: none;
}
.sidebar{
width: 0;
height: 100%;
position: fixed;
text-align: center;
background-color: rgba(0,0,0,.92);
backdrop-filter: blur(20px) saturate(100%);
z-index: 1;
top: 0;
overflow-x: hidden;
overflow-y: hidden;
padding-top: 100px;
transition: 0.3s;
white-space: nowrap;
}
.sidebar a {
text-decoration: none;
color: #efefef;
display: block;
padding: 1rem 1.2rem;
transition: 0.2s;
}
.sidebar a:hover{
background-color: #efefef;
color: #232323;
}
#main {
transition: 0.3s;
}
.logo{
font-size: 2rem;
transition: 0.2s;
}
.logo:hover{
color: #E7AD9C;
}
.container {
margin-top: 3.5rem;
display: flex;
flex-direction: column;
justify-content: start;
transition: 0.3s;
}
#content {
transition: 0.3s;
}
.sec {
width: 100%;
height: 100vh;
}
.intro {
height: 100vh;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
}
.jumbo-banner {
font-size: 5rem;
padding-bottom: 4rem;
}
.jumbo-small{
font-size: 2rem;
width: 70%;
color: #efefef;
text-align: center;
background-color: #232323;
padding: 0.5rem;
}
.hoverable {
transition: 0.3s;
}
.slider{
width: 5vw;
height: 5vw;
transition: 0.3s;
transform: rotate(45deg);
margin-top: 10rem;
border-bottom: 2px solid #232323;
border-right: 2px solid #232323;
cursor: pointer;
}
.slider:hover{
transform: translateY(1rem) rotate(45deg);
}
.slider-label-box{
padding-top: 2rem;
}
.slider-label{
background-color: #232323;
color: #efefef;
font-size: 1.3rem;
opacity: 0;
transition: 0.3s;
}
@media only screen and (max-width:700px) {
.navigation {
height: 3rem;
}
.container{
margin-top: 3rem;
}
.logo {
font-size: 1.7rem;
}
.jumbo-intro{
font-size: 1.8rem;
}
.jumbo-banner{
margin-top: 10vh;
font-size: 3rem;
}
.slider{
width: 10vw;
height: 10vw;
margin: 0;
}
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<nav class="navigation" id="navigation">
<span class="nav_item burger">
<a class="openbtn" onclick="sideBar()">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="17.714" viewBox="0 0 39.118 17.714">
<g id="hamburger" transform="translate(0.656 0.65)">
<line id="Line_2" data-name="Line 2" x2="37.807" fill="none" stroke="#efefef" stroke-linecap="round" stroke-width="1.3"/>
<line id="Line_3" data-name="Line 3" x2="37.807" y2="0.318" transform="translate(0 8)" fill="none" stroke="#efefef" stroke-linecap="round" stroke-width="1.3"/>
<line id="Line_4" data-name="Line 4" x2="37.807" transform="translate(0 16.414)" fill="none" stroke="#efefef" stroke-linecap="round" stroke-width="1.3"/>
</g>
</svg>
</a>
</span>
<span class="nav_item logo" id="logo">CEMESAW</span>
<span></span>
</nav>
<div class="container" id="container">
<div class="sidebar" id="mysidebar">
<a href="">HOME</a>
<a href="">ABOUT US</a>
<a href="">MEETUP</a>
<a href="">LOGIN/SIGNUP</a>
</div>
<div id="content">
<section class="sec intro">
<h3 class="jumbo-banner">
<span class="hoverable" id="jumboref1">C</span>
<span class="hoverable" id="jumboref2">E</span>
<span class="hoverable" id="jumboref3">M</span>
<span class="hoverable" id="jumboref4">E</span>
<span class="hoverable" id="jumboref5">S</span>
<span class="hoverable" id="jumboref6">A</span>
<span class="hoverable" id="jumboref7">W</span></h3>
<h6 class="jumbo-small">The
<span class="hoverable" id="smallref1">Cultural </span>
<span class="hoverable" id="smallref2">Experience</span>
of
<span class="hoverable" id="smallref3">Middle </span>
<span class="hoverable" id="smallref4">Eastern </span>
and
<span class="hoverable" id="smallref5">South </span>
<span class="hoverable" id="smallref6">Asian </span>
<span class="hoverable" id="smallref7">Women </span> is an organization with the focus
of treating issues for women from all walks of life.
</h6>
<br>
<div class="slider" id="slide-down">
</div>
<div class="slider-label-box"><h4 class="slider-label" id="label">meet the team</h4></div>
</section>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="background.js"></script>
</body>
</html>问题来自滚动后元素的重叠。解决此问题的方法是以以下方式使用z-index：
.navigation{
z-index: 1;
和
.intro {
z-index: 2;
JSFiddle在这里可用