我不明白导航栏进入另一个部分后为什么不工作。只有当它位于页面顶部(主页部分(时，它才起作用。我尝试了几种不同的方法，但似乎都不起作用。我试着寻找其他帖子，但找不到任何具体的问题。我只把"；关于"；部分给出一个想法。提前感谢！
* {
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>这是因为顶部导航栏位于其他页面下方。将z索引放在导航栏的css部分。
nav {
width: 100%;
height: 80px;
background-color: #fff;
line-height: 80px;
position: fixed;
z-index: 99
}
原因是导航内容上有position:fixed，然后，当向下滚动到"关于"部分时，内容向上移动并覆盖导航栏，因此它不再接收鼠标事件。如果检查元素，您可以很容易地看到这一点。您可以通过在导航容器上设置z-index: 1来修复它，使至少导航项目保持可点击状态。届时，您将有其他样式问题需要解决，但它解决了眼前的问题。