导航栏不会显示 z-index 问题（？）

Question

我做的第一个 html 的 z-index 很好，但在第二个上，我添加了粘性导航栏，现在在 [=47= 时导航栏没有显示]模式。

这里是对比：

（抱歉图片大小不一）

#navbar {  
    position: fixed;
    top: 0px;
    display: flex;
    overflow: hidden;
    padding: 10px 10px; /* Large padding which will shrink on scroll (using JS) */
    transition: 0.4s; /* Adds a transition effect when the padding is decreased */
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    width: 100%;
    background-color: #55426e;
    z-index: 4;
}

.sticky{
    padding: 5px 10px;
}

.burger {
    display: none;
    cursor: pointer;
    padding: 5px;
    z-index: 3;
}

.burger div{
    width: 23px;
    height: 3px;
    background-color: aliceblue;
    margin: 5px;
    transition: all 0.3s ease;
    border-radius:10px;
}

@media screen and (max-width: 1024px) {
     .nav-links{
        width: 65%;
    }
}

@media screen and (max-width: 768px){
    body{
        overflow-x: hidden;
    }
    .nav-links {
        position: absolute;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: #55426e;
        display:flex;
        flex-direction:column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }
    .nav-links li{
        opacity: 0;
    }
    .burger{
        display:block;
    }
    #navbar {
        padding: 2px 10px !important;
        /* Use !important to make sure that JavaScript 
        doesn't override the padding on small screens */
    }
    }

.withpic {
        position: relative;
        background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.5)), url(aboutme2.JPG);
        height: 100vh;
        background-size: cover;
        background-position: center;
}

.wopic {
        position: relative;
        background-color: #ddd5e2;
        padding-top: 20px;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-around;
        padding-left: 50px;
        padding-right: 50px;
        padding-bottom: 50px;
}

.under {
    position: relative;
    z-index: 3;
}
/*sticky nav bar -- from w3schools*/

.overtext {
        display: flex;
        align-items: flex-end;
        flex-direction: column;
        color: #ddd5e2;
        text-align: center;
        position: relative;
        z-index: -99;
}

<DOCTYPE! html>
    <html>
    <head>
        <title>Website</title>
        <link href="ask.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="withpic">
            <nav>
                <div id="navbar">
                    <div id="logo">
                        <h4>logo</h4>
                    </div>
                    <ul class="nav-links">
                        <li><a href="#"> HOME </a></li>

                        <li><a href="#"> ABOUT </a></li>

                        <li><a href="#"> PHOTOGRAPHY </a></li>

                        <li><a href="#"> ORGANIZER </a></li>

                        <li><a href="#"> CONTACT </a></li>
                    </ul>
                    <div class="burger">
                        <div class="line1"></div>
                        <div class="line2"></div>
                        <div class="line3"></div>
                    </div>
                </div>
            </nav>

            <div class="lefty under">
                <div class="overtext">
                    <h1>About Me</h1>
                    <em>
                        私について
                    </em>
                </div>
            </div>

        </div>
        <div class="wopic">
            <p>section without picture</p>    
        </div>
        <script src="app.js"></script>
        <script src="nav.js"></script>
    </body>
</html>

//burger javascript

function navSlide() {
    let burger = document.querySelector(".burger");
    let nav = document.querySelector(".nav-links");
    let navLinks = document.querySelectorAll(".nav-links li");
    //toggle nav
    burger.addEventListener("click", function() {
        nav.classList.toggle('nav-active');
  //animate links
    navLinks.forEach((link, index)=> {
        if (link.style.animation) {
            link.style.animation = "";
        } else {
            link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
        }

    });
        //burger animation
    burger.classList.toggle('toggle');

    });


  
}

navSlide();

//sticky nav bar with transitions javascript

// When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
window.onscroll = function () { scrollFunction() };

function scrollFunction() {
    if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
        document.getElementById("navbar").style.padding = "2px 10px";
        document.getElementById("logo").style.fontSize = "20px";
    } else {
        document.getElementById("navbar").style.padding = "10px 10px";
        document.getElementById("logo").style.fontSize = "25px";
    }
}

我删除了css中的一些字体属性以避免它变长。请告诉我是否需要从我的原始代码中添加更多 css。

Answer 1

这是修复了可见性问题的更新代码段。上面一定有你没有包含的额外 css，但主要思想在这里。单击汉堡菜单，出现导航栏。

我看到的两个主要问题：

#nav

overflow: hidden

否 transform: translateX(0) 将导航菜单放置到位。

function navSlide() {

  let burger = document.querySelector(".burger");
  let nav = document.querySelector(".nav-links");
  let navLinks = document.querySelectorAll(".nav-links li");
  //toggle nav
  burger.addEventListener("click", function() {
    nav.classList.toggle('nav-active');
    //animate links
    navLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = "";
      } else {
        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
      }

    });
    //burger animation
    burger.classList.toggle('toggle');

  });


}

navSlide();

//sticky nav bar with transitions javascript

// When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementById("navbar").style.padding = "2px 10px";
    document.getElementById("logo").style.fontSize = "20px";
  } else {
    document.getElementById("navbar").style.padding = "10px 10px";
    document.getElementById("logo").style.fontSize = "25px";
  }
}

:root,
html,
body {
  height: 100%;
  width: 100%;
}

#navbar {
  position: fixed;
  top: 0px;
  display: flex;
  padding: 10px 10px;
  /* Large padding which will shrink on scroll (using JS) */
  transition: 0.4s;
  /* Adds a transition effect when the padding is decreased */
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  width: 100%;
  background-color: #55426e;
  z-index: 4;
}

.sticky {
  padding: 5px 10px;
}

.burger {
  display: none;
  cursor: pointer;
  padding: 5px;
  z-index: 3;
}

.burger div {
  width: 23px;
  height: 3px;
  background-color: aliceblue;
  margin: 5px;
  transition: all 0.3s ease;
  border-radius: 10px;
}

@media screen and (max-width: 1024px) {
  .nav-links {
    width: 65%;
  }
}

@media screen and (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
  .nav-links {
    position: absolute;
    right: 0px;
    height: 92vh;
    top: 8vh;
    background-color: #55426e;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }
  .nav-links li {
    opacity: 0;
  }
  .burger {
    display: block;
  }
  .nav-links.nav-active {
    transform: translateX(0);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .nav-links.nav-active li,
  .nav-links.nav-active li a {
    list-style: none;
    opacity: 1;
    color: white;
    text-decoration: none;
  }
  #navbar {
    overflow: visible;
    padding: 2px 10px !important;
    /* Use !important to make sure that JavaScript 
        doesn't override the padding on small screens */
  }
}

.withpic {
  position: relative;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url(aboutme2.JPG);
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.wopic {
  position: relative;
  background-color: #ddd5e2;
  padding-top: 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 50px;
}

.under {
  position: relative;
  z-index: 3;
}


/*sticky nav bar -- from w3schools*/

.overtext {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  color: #ddd5e2;
  text-align: center;
  position: relative;
  z-index: -99;
}

<DOCTYPE! html>
  <html>

  <head>
    <title>Website</title>
    <link href="ask.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div class="withpic">
      <nav>
        <div id="navbar">
          <div id="logo">
            <h4>logo</h4>
          </div>
          <ul class="nav-links">
            <li><a href="#"> HOME </a></li>

            <li><a href="#"> ABOUT </a></li>

            <li><a href="#"> PHOTOGRAPHY </a></li>

            <li><a href="#"> ORGANIZER </a></li>

            <li><a href="#"> CONTACT </a></li>
          </ul>
          <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
          </div>
        </div>
      </nav>

      <div class="lefty under">
        <div class="overtext">
          <h1>About Me</h1>
          <em>
                        私について
                    </em>
        </div>
      </div>

    </div>
    <div class="wopic">
      <p>section without picture</p>
    </div>
    <script src="app.js"></script>
    <script src="nav.js"></script>
  </body>

  </html>

导航栏不会显示 z-index 问题（？）

Nav-bar wont show up z-index issue(?)

html

javascript

css

z-index

navbar