导航栏不适用于所有部分（html、css、js）
[英]Navigation bar doesn't work in all sections (html, css, js)
问题描述
我无法弄清楚为什么导航栏一旦进入另一个部分就不起作用。 它仅在位于页面顶部（主页部分）时才有效。 我尝试了一些不同的东西，但它们似乎都不起作用。 我尝试寻找其他帖子，但找不到任何特定于这个问题的帖子。 我只在此代码中包含“关于”部分来给出一个想法。 提前致谢！
* { 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>
2 个解决方案
解决方案1
1 已采纳 2020-07-28 23:50:46
这是因为顶部导航栏位于其他页面下方。 将 z-index 放入导航栏的 css 部分。
nav {
width: 100%;
height: 80px;
background-color: #fff;
line-height: 80px;
position: fixed;
z-index: 99
}
解决方案2
0 2020-07-28 23:49:28
原因是您有position:fixed在您的导航内容上，然后，当您向下滚动到“关于”部分时，内容会向上移动并覆盖导航栏，因此它不再接收鼠标事件。 如果您检查元素，您可以很容易地看到这一点。 您可以通过在导航容器上设置z-index: 1来修复它，以便至少导航项目保持可点击状态。 那时您将有其他样式问题需要解决，但它解决了眼前的问题。
使用CSS在导航栏上创建“不可见”滚动条（其中隐藏不起作用）
[英]Creating an “invisible” scrollbar on a navigation bar using CSS (where hidden doesn't work)
如何在一个地方编写导航栏并仅使用html / css / js在所有页面上使用它
[英]How to write a navigation bar in one place and use it across all pages with just html/css/js
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.