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

Question

i can't figure out why the nav bar doesn't work once it goes to another section.我无法弄清楚为什么导航栏一旦进入另一个部分就不起作用。 it only works when it is at the top of the page (home section).它仅在位于页面顶部（主页部分）时才有效。 i tried a few different things, but none of them seem to work.我尝试了一些不同的东西，但它们似乎都不起作用。 i tried looking for other posts but couldn't anything specific to this problem.我尝试寻找其他帖子，但找不到任何特定于这个问题的帖子。 i only included the "about" section in this code to give an idea.我只在此代码中包含“关于”部分来给出一个想法。 thanks in advance!提前致谢！

 * { 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>

Answer 1

It is because the top navbar is below the other pages.这是因为顶部导航栏位于其他页面下方。 Put z-index in css section for navbar.将 z-index 放入导航栏的 css 部分。

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

Answer 2

The reason is that you have position:fixed on your nav content, and then, when you scroll down to the About section, the content moves up and covers the nav bar so it is no longer receiving mouse events.原因是您有position:fixed在您的导航内容上，然后，当您向下滚动到“关于”部分时，内容会向上移动并覆盖导航栏，因此它不再接收鼠标事件。 You can see this easily enough if you inspect the elements.如果您检查元素，您可以很容易地看到这一点。 You can fix it so that at least the nav items remain clickable by setting z-index: 1 on the nav container.您可以通过在导航容器上设置z-index: 1来修复它，以便至少导航项目保持可点击状态。 You will have other styling issues to fix then, but it solves the immediate problem.那时您将有其他样式问题需要解决，但它解决了眼前的问题。

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-07-28 23:50:46

解决方案2
0 2020-07-28 23:49:28

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-07-28 23:50:46

解决方案2 0 2020-07-28 23:49:28

解决方案1
1 已采纳 2020-07-28 23:50:46

解决方案2
0 2020-07-28 23:49:28