我有一个固定的导航栏，当从部分元素1和2向下和向上滚动时，它运行良好。问题是，当它进入我的联系人的第3部分时，它不会向上滚动到任何其他部分。此外，一旦导航栏到达第3部分，就无法选择。请帮忙😬
<body class="text-center" style="background-color: #32e0c4;">
<div id="section1" class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto">
<div class="inner" style="">
<nav class="nav nav-masthead navbar-fixed-top" id="myNavbar">
<a class="nav-link " href="#section1">Home</a>
<a class="nav-link" href="#section2">Skillz</a>
<a class="nav-link" href="#section3">Contact</a>
<a class="nav-link dropdown dropdown-toggle" data-toggle="dropdown" href="#">Projects</a>
</nav>
</div>
</header>
<main style="margin-top:50px" role="main" class="inner cover">
<h1 class="cover-heading">Hi I'm Shonte</h1>
<h2 class="cover-heading"> A web developer</h2>
<img class="shonprofile rounded-circle profilecenter " style="" src="images/shonblue2.png" alt="" width="300" height="300">
</main>
</div>
<div id="section2" class="skillRow container-fluid">
<h1>Skills</h1>
<div class="row">
<div class="col-md-7 skillability">
<p>HTML ⭐️⭐️⭐️⭐️</p>
<br>
<p>CSS ⭐️⭐️⭐️⭐️</p>
<br>
<p>JavaScript ⭐️⭐️⭐️⭐️</p>
<br>
<p>Bootstrap ⭐️⭐️⭐️⭐️</p>
<br>
<p>Nodejs ⭐️⭐️⭐️⭐️</p>
<br>
<p>SQL ⭐️⭐️⭐️⭐️</p>
<br>
<p>MongoDB ⭐️⭐️⭐️⭐️</p>
<br>
<p style="margin-bottom:10px">Mongoose ⭐️⭐️⭐️⭐️</p>
</div>
<div class="col-sm-3" style="margin-top:50px">
<img src="images/laptop.png" alt="">
</div>
</div>
</div>
<div id="section3" class="container-fluid" style="background-color:#32e0c4 ">
<form class="center_div">
<div class="form-row">
<h1 class="col-md-12" style="margin-top:20px">Contact Me</h1>
<div class="form-group col-md-12" style="padding-top: 10px">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group col-md-12">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</div>
<button type="submit" class="btn btn-primary" style="margin-bottom:10px">Submit</button>
</form>
</div>
<div id="section4" class="container-fluid section4">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="index.js" charset="utf-8"></script>
</script>
</body>
</html>
$(document(.ready(function(｛
$('body'(.sollspy({目标："；。navbar"；，偏移：50})；
$("#myNavbar a"(.on('click'，function(event({
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function() {
window.location.hash = hash;
});
}
})；})；
您应该尝试将导航栏放在任何部分之外。
<nav class="nav nav-masthead navbar-fixed-top" id="myNavbar">
<a class="nav-link " href="#section1">Home</a>
<a class="nav-link" href="#section2">Skillz</a>
<a class="nav-link" href="#section3">Contact</a>
<a class="nav-link dropdown dropdown-toggle" data-toggle="dropdown"
href="#">Projects</a>
</nav>
<div id="section1" class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
...
</div>
为了确保它可以从任何部分点击和可见，您可以通过将z索引设置为页面的最高索引来更改z索引。