【发布时间】：2018-10-12 00:59:02
【问题描述】：
我遇到了一个问题，我不确定要解决它。我有一个启用了 scrollspy 的 bootstrap 4 导航栏，因此当您滚动浏览页面的不同部分时，导航栏会更新。
我还有一个 jquery 函数，它可以平滑滚动，这样当您单击导航链接时页面不会立即跳转。我有两个问题
我的网站：https://codepen.io/tidus198/pen/deWpvX3
问题是导航栏滚动间谍。默认情况下，该页面不会使我的第一个导航项处于活动状态。当您第一次访问该页面或一直滚动到页面顶部时，关于 导航项不会突出显示。如果您向下滚动一点，关于 链接会在导航栏中激活。发生这种情况是因为我修复了导航栏，使其与页面一起滚动。如何让它工作以使第一个导航项默认处于活动状态？
如果您单击其中一个导航项，它会滚动到该部分的标题（即显示内容而不是标题）。我通过使用 jquery 偏移函数（获取最大值并将其减去设定的数量）来解决此问题，以立即显示实际标题而不是内容。所以现在，当您点击例如 Contact 时，它实际上会滚动到 Contact 文本。但问题是，如果您单击联系人，导航栏会将投资组合显示为活动项目。我将如何解决这个问题？ 偏移有效，但破坏了导航项。
任何帮助将不胜感激。
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);
});
});
【问题讨论】：
标签： javascript jquery html css twitter-bootstrap