我遇到了一个问题，我不确定是否解决它。我有一个启用了 scrollspy 的引导 4 导航栏，以便在您滚动页面的不同部分时导航栏更新。
我还有一个jquery函数，可以平滑滚动，这样当您单击导航链接时页面就不会立即跳转。我有两个问题
我的网站： https://codepen.io/tidus198/pen/deWpvX 3
-
问题是导航栏滚动。默认情况下，该页面不会使我的第一个导航项处于活动状态。首次访问页面或一直滚动到页面顶部时，">关于">导航项不会突出显示。如果向下滚动一点，导航栏中的"关于">链接将变为活动状态。发生这种情况是因为我修复了导航栏，因此它与页面一起滚动。如何让它工作，以便第一个导航项默认处于活动状态？
-
如果单击其中一个导航项，它将滚动到该部分的标题(即显示内容而不是标题(。我通过使用 jquery 偏移函数(获取顶部值并将其减去设定的数量(来立即显示实际标题而不是内容来解决此问题。所以现在，当您单击例如联系人时，它实际上会滚动到联系人文本。但问题是，如果您单击"联系人"，导航栏会将"投资组合"显示为活动项目。我将如何解决这个问题？ 偏移量有效，但破坏了导航项。
任何帮助将不胜感激。
.HTML：
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Portfolio</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="css/site.css" type="text/css" />
</head>
<body id = "body">
<header id="test">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top" >
<a class="navbar-brand" href="#"><img id="navpic" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Profile Picture" ></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav nav-pills ml-auto" id="homenav">
<li class="nav-item">
<a class="nav-link" href="#test">About <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<section class="container">
<div class="jumbotron text-center">
<div class="row">
<div class="col-12 col-md-4">
<img id="mypic" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Profile Picture" class="img-thumbnail">
</div>
<div class="col-12 col-md-8">
<h1 class="display-5">Your Name Here</h1>
<p class="lead">Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and
creative direction; devoted to functional programming and information architecture.</p>
<hr class="my-4">
<p class="small">Web Developer - User Experience Designer - Graphic Artist</p>
</div>
</div>
</div>
</section>
</header>
<main>
<section id="content-container" class="container">
<div class="row" id="portfolio">
<div class="col-12">
<h2 class="display-5 text-center text-white text-uppercase mb-3">Portfolio</h2>
</div>
</div>
<div class="row">
<div class="col-lg-6 d-flex align-items-stretch mb-4">
<div class="card w-100">
<img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">
<div class="card-footer text-center">
Image One
</div>
</div>
</div>
<div class="col-lg-6 d-flex align-items-stretch mb-4">
<div class="card w-100">
<img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">
<div class="card-footer text-center">Image Two</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 d-flex align-items-stretch mb-4">
<div class="card w-100">
<img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">
<div class="card-footer text-center">
Image Three
</div>
</div>
</div>
<div class="col-lg-6 d-flex align-items-stretch mb-4">
<div class="card w-100">
<img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">
<div class="card-footer text-center">Image Four</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 d-flex align-items-stretch mb-4">
<div class="card w-100">
<img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">
<div class="card-footer text-center">
Image Five
</div>
</div>
</div>
<div class="col-lg-6 d-flex align-items-stretch mb-4">
<div class="card w-100">
<img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">
<div class="card-footer text-center">Image Six</div>
</div>
</div>
</div>
</section>
</main>
<footer>
<section class="container">
<div class="jumbotron mt-2">
<div class="row">
<div class="col-12">
<h2 class="display-4 text-center pb-2" id="contact">Contact Me</h2>
</div>
</div>
<div class="row">
<div class="col-12 col-md-8">
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Name" required>
</div>
<div class="form-group">
<label for="emailaddr">Email</label>
<input type="email" class="form-control" id="emailaddr" placeholder="name@example.com" required>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="number" class="form-control" id="phone" placeholder="123-456-7890">
</div>
<div class="form-group">
<label for="textarea">Message</label>
<textarea class="form-control" id="textarea" rows="3"></textarea>
</div>
</form>
</div>
<div class="col-12 col-md-4">
<p class="lead">Feel free to contact me if you have any additional questions on my portfolio. You can either email me directly
at
<a href="mailto:myemail@myemail.com?subject=Porfolio Question">
myemail@myemail.com</a> or fill out the contact form.
</p>
</div>
</div>
</div>
</section>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="js/app.js" type="text/javascript"></script>
</body>
</html>
.CSS：
blockquote {
border-left: none;
}
#body {
background-color: #464646;
padding-top: 65px;
position: relative;
}
#mypic {
width: 200px;
height: 200px;
border-radius: 50%;
}
#navpic {
width: 40px;
height: 40px;
}
.jumbotron #contact {
margin-top: -50px;
}
form label {
font-weight: bold;
}
#homenav > li > a:hover{
background-color:grey;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.1);
}
#about{
position: relative;
top: 1px;
}
.JS：
$(document).ready(function (){
$('body').scrollspy({ target: '.navbar' });
$('.nav-link').on('click', function(){
var clickedItem = $(this).attr('href');
$('html, body').animate({
scrollTop: $(clickedItem).offset().top - 80
}, 1500);
});
});
一些小的调整，对我来说看起来很对。在这里看到我的叉子：https://codepen.io/mdlanglais/pen/OZmWNV
.HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Portfolio</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="css/site.css" type="text/css" />
</head>
<body id = "body" data-spy="scroll" data-target="#navbarNav">
<header id="test">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top" >
<a class="navbar-brand" href="#"><img id="navpic" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Profile Picture" ></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav nav-pills ml-auto" id="homenav">
<li class="nav-item">
<a class="nav-link active" href="#test">About <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<section class="container">
<div class="jumbotron text-center">
<div class="row">
<div class="col-12 col-md-4">
<img id="mypic" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Profile Picture" class="img-thumbnail">
</div>
<div class="col-12 col-md-8">
<h1 class="display-5">Your Name Here</h1>
<p class="lead">Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and
creative direction; devoted to functional programming and information architecture.</p>
<hr class="my-4">
<p class="small">Web Developer - User Experience Designer - Graphic Artist</p>
</div>
</div>
</div>
</section>
</header>
<main>
<section id="content-container" class="container">
<div class="row" id="portfolio">
<div class="col-12">
<h2 class="display-5 text-center text-white text-uppercase mb-3">Portfolio</h2>
</div>
</div>
<div class="row">
<div class="col-lg-6 d-flex align-items-stretch mb-4">
<div class="card w-100">
<img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">
<div class="card-footer text-center">
Image One
</div>
</div>
</div>
<div class="col-lg-6 d-flex align-items-stretch mb-4">
<div class="card w-100">
<img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">
<div class="card-footer text-center">Image Two</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 d-flex align-items-stretch mb-4">
<div class="card w-100">
<img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">
<div class="card-footer text-center">
Image Three
</div>
</div>
</div>
<div class="col-lg-6 d-flex align-items-stretch mb-4">
<div class="card w-100">
<img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">
<div class="card-footer text-center">Image Four</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 d-flex align-items-stretch mb-4">
<div class="card w-100">
<img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">
<div class="card-footer text-center">
Image Five
</div>
</div>
</div>
<div class="col-lg-6 d-flex align-items-stretch mb-4">
<div class="card w-100">
<img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">
<div class="card-footer text-center">Image Six</div>
</div>
</div>
</div>
</section>
</main>
<footer>
<section class="container">
<div class="jumbotron mt-2">
<div class="row">
<div class="col-12">
<h2 class="display-4 text-center pb-2" id="contact">Contact Me</h2>
</div>
</div>
<div class="row">
<div class="col-12 col-md-8">
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Name" required>
</div>
<div class="form-group">
<label for="emailaddr">Email</label>
<input type="email" class="form-control" id="emailaddr" placeholder="name@example.com" required>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="number" class="form-control" id="phone" placeholder="123-456-7890">
</div>
<div class="form-group">
<label for="textarea">Message</label>
<textarea class="form-control" id="textarea" rows="3"></textarea>
</div>
</form>
</div>
<div class="col-12 col-md-4">
<p class="lead">Feel free to contact me if you have any additional questions on my portfolio. You can either email me directly
at
<a href="mailto:myemail@myemail.com?subject=Porfolio Question">
myemail@myemail.com</a> or fill out the contact form.
</p>
</div>
</div>
</div>
</section>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="js/app.js" type="text/javascript"></script>
</body>
.CSS
blockquote {
border-left: none;
}
#body {
background-color: #464646;
padding-top: 0px;
position: relative;
}
#mypic {
width: 200px;
height: 200px;
border-radius: 50%;
}
#navpic {
width: 40px;
height: 40px;
}
.jumbotron #contact {
margin-top: -50px;
}
form label {
font-weight: bold;
}
#homenav > li > a:hover{
background-color:grey;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.1);
}
#test {
padding-top: 95px;
}
#about{
position: relative;
top: 1px;
}
.JS
$(document).ready(function (){
$('body').scrollspy({ target: '.navbar' });
$('.nav-link').on('click', function(){
var clickedItem = $(this).attr('href');
$('html, body').animate({
scrollTop: $(clickedItem).offset().top
}, 1500);
});
});
基本上，我将"关于"链接设置为.active，从 js 中的.top中删除了 -80，从body元素中删除了padding-top，并在 css 中的#test元素中添加了一些padding-top。它可能可以通过相同想法的变体来完成。