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

Posted 2023-05-08

技术标签:

【中文标题】向下滚动后无法访问导航栏中的菜单按钮【英文标题】：Menu button in navigation bar not accessible after scrolling down 【发布时间】：2021-02-01 03:42:46 【问题描述】：

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

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"   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-/>
            <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-/>
            <line id="Line_4" data-name="Line 4" x2="37.807" transform="translate(0 16.414)" fill="none" stroke="#efefef" stroke-linecap="round" stroke-/>
          </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>

【问题讨论】：

嗨！你想把它放在一个 jsfiddle 中以便我们看一下吗？ 【参考方案1】：

喏，

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