导航栏不适用于所有部分（html、css、js）答案

【问题标题】：Navigation bar doesn't work in all sections (html, css, js)导航栏不适用于所有部分（html、css、js）
【发布时间】：2020-07-28 23:34:09
【问题描述】：

我无法弄清楚为什么导航栏在转到另一个部分后不起作用。它仅在位于页面顶部（主页部分）时才有效。我尝试了一些不同的东西，但它们似乎都不起作用。我尝试寻找其他帖子，但找不到任何特定于这个问题的帖子。我只在此代码中包含“关于”部分来给出一个想法。提前致谢！

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

.container {
  width: 100%;
  height: 100vh;
  scroll-behavior: smooth;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  overflow-x: hidden;
  min-width:100%;
}

.scroll {
  width: 100%;
  height: 100vh;
  scroll-snap-align: center;
  position: relative;
}

/* NAVIGATION BAR */

#main {
    width: 100%;
    height: 100%;
  background-color: green;
}

nav {
    width: 100%;
    height: 80px;
    background-color: #fff;
    line-height: 80px;
    position: fixed;
}

nav ul {
    text-align: center;
}

nav ul li {
    list-style-type: none;
    display: inline-block;
    transition: 0.8s all;
}

nav ul li a {
    text-decoration: none;
    color: gray;
    padding: 30px;
}

nav ul li a:hover {
    color: #000;
}


/* HOME NAME */

.name {
  font-family: sans-serif;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
}

/* TYPEWRITER EFFECT */

.css-typing {
  position: absolute;
  top: 55%;
  left: 36.5%;
  /*transform: translateX(-40%) translateY(-60%);*/
}

.css-typing p {
  border-right: .15em solid orange;
  font-family: "Courier";
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
}

.css-typing p:nth-child(1) {
  /*width: 7.3em;*/
  width: 10ch;
  -webkit-animation: type 2s steps(10, end);
  animation: type 2s steps(10, end);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(2) {
  width: 38ch;
  opacity: 0;
  -webkit-animation: type2 2s steps(40, end);
  animation: type2 2s steps(40, end);
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(3) {
  width: 13ch;
  opacity: 0;
  -webkit-animation: type3 5s steps(20, end), blink .5s step-end infinite alternate;
  animation: type3 5s steps(20, end), blink .5s step-end infinite alternate;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes type {
  0% {
    width: 0;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    border: none;
  }
}

@-webkit-keyframes type {
  0% {
    width: 0;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    border: none;
  }
}

@keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}
@-webkit-keyframes blink {
  50% {
    border-color: tranparent;
  }
}


/* SECTIONS */

.box {
  width: 100%;
  height: 100vh;
  padding: 70px;
  display: flex;
}

.box .imgPro {
  width: 150px;
  flex: 0 0 150px;
}

.box .imgPro img {
  width: 100%;
  padding: 10px;
  border-radius: 50%;
}

.box .content {
  padding-left: 20px;
}

.box .content h2 {
  margin: 0;
  padding-left: 0;
  padding-bottom: 20px;
  text-align: center;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=devide-width, initialpscale=1.0">
    <title> TITLE </title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- link for back to top button -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> 
  </head>

<body>
  <button id="back-to-top-btn"><i class="fas fa-angle-double-up"></i></button>
  <div class="container">
    <div id="main" class="scroll">
      <nav>
      <!-- <img src="x.png" width="200" height="80"> for top-left logo -->
        <ul>
          <li><a href="#home" class="js-anchor-link">Home</a></li><!--
          --><li><a href="#about" class="js-anchor-link">About</a></li><!--
          --><li><a href="#resume" class="js-anchor-link">Resume</a></li><!--
          --><li><a href="#portfolio" class="js-anchor-link">Portfolio</a></li><!--
          --><li><a href="#contact" class="js-anchor-link">Contact</a></li>
        </ul>
      </nav>
      <h1 class="name">TITLE</a></h1>
    </div>
    <section id="about" class="scroll"> 
      <div class="box">

        <div class="content">
          <h2>About</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac gravida nibh. Donec et viverra leo. Sed hendrerit blandit lectus. In pretium orci tellus, porta sollicitudin mauris lobortis et. Donec at sollicitudin nisl. Cras congue elit sed dolor interdum auctor. Nunc convallis purus a vestibulum mollis. Suspendisse ac volutpat sem. Nunc in neque mollis, mattis augue tristique, ornare dolor. Morbi imperdiet tincidunt lectus at molestie. Fusce ultricies mattis maximus.</p>
        </div>
      </div>
    </section>
</body>
</html>

【问题讨论】：

标签： javascript html css twitter-bootstrap bootstrap-4

【解决方案1】：

这是因为顶部导航栏位于其他页面下方。将 z-index 放在导航栏的 css 部分。

nav {
        width: 100%;
        height: 80px;
        background-color: #fff;
        line-height: 80px;
        position: fixed;
        z-index: 99
    }

【讨论】：

效果很好！我的一个问题是关于“主页”选项。它没有用，所以我将 href="home" 更改为 href="main"。为什么我不能只创建一个新 id 并添加 id="home" next id="main" （div 低于 class="container"）？该选项不起作用

【解决方案2】：

原因是您的导航内容中有position:fixed，然后，当您向下滚动到“关于”部分时，内容会向上移动并覆盖导航栏，因此它不再接收鼠标事件。如果您检查元素，您可以很容易地看到这一点。您可以通过在导航容器上设置z-index: 1 来修复它，以便至少导航项目保持可点击状态。届时您将需要解决其他样式问题，但它可以解决眼前的问题。

【讨论】：