向下滚动后无法访问导航栏中的菜单按钮

Question

我目前正在处理我的这个网站项目，但遇到了瓶颈。我注意到导航触发按钮（导航左上角的汉堡按钮）仅在我们位于页面开头时才有效，但是只要我向下滚动几个像素，它就不会响应任何点击次数。我已经查看了我的代码中的所有地方，但也许我只需要另一双眼睛来检查我的代码，看看我可能没有发现的东西。

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>

Answer 1

再见，

问题出在滚动后元素重叠。解决此问题的一种方法是按以下方式使用 z-index：

.navigation{
    z-index: 1;

和

.intro {
    z-index: 2;

JSFiddle 可用here

周末愉快，
安东尼奥

向下滚动后无法访问导航栏中的菜单按钮

Menu button in navigation bar not accessible after scrolling down

html

javascript

css

jquery

responsive-design