导航链接有效，但是在向下滚动页面时，它不会根据位置突出显示当前链接。 当我注释掉custom.css时它不起作用，所以我不知道发生了什么。我希望滚动间谍在区域上滚动时突出显示导航项，如果可能的话，请使用＃ff3b3f。任何指针都很棒：）
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>GSD Lexi - German Shepherd Dog</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body id="home" data-spy="scroll" data-target=".navbar">
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#home">GSD Lexi</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="#about">About <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#tricks">Tricks</a>
<a class="nav-item nav-link" href="#equipment">Equipment</a>
</div>
</div>
</div>
</nav>
<!-- /navbar -->
<!-- jumbotron -->
<div class="jumbotron jumbotron-fluid">
<div class="container text-sm-center pt-5">
<h1 class="display-2">Lexi the GSD</h1>
<p class="lead">A one page website for a German Shepherd Dog.</p>
<a href="https://www.instagram.com/gsdlexi/" target="_blank"><button type="button" class="btn btn-primary">Follow on Instagram!</button></a>
</div>
</div> <!-- /jumbotron -->
<div class="container pt-4">
<!-- about -->
<div class="row justify-content-center">
<div class="col-md-6 text-center">
<h1 id="about" class="my-5 display-4">About</h1>
<img src="img/lexi-about.jpg" class="img-fluid rounded mb-4" alt="Responsive image">
<p>Lexi is a purebred German Shepherd Dog living in Brisbane, Queensland. She loves a good game of fetch and walks of all sorts.</p>
<p>Her favourite foods are cheese, chicken necks, and a BIG raw bone! Although she would probably eat anything in her bowl.</p>
<p>She's not really fond of cats and is afraid of vacuums and water hoses.</p>
<p>You can check out all the tricks Lexi can perform below or follow her daily routines on <a href="#">Instagram</a></p>
</div>
</div><!-- /about -->
<!-- tricks -->
<div class="tricks">
<h1 id="tricks" class="my-5 text-center display-4">Tricks</h1>
<div class="row">
<div class="col-md-6 col-lg-4 mb-5">
<div class="card">
<img class="card-img-top" src="img/sit.jpg" alt="Sit photo">
<div class="card-body mb-2">
<h5 class="card-title text-center">Sit</h5>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-5">
<div class="card">
<img class="card-img-top" src="img/down.jpg" alt="Down photo">
<div class="card-body mb-2">
<h5 class="card-title text-center">Down</h5>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-5">
<div class="card">
<img class="card-img-top" src="img/shake.jpg" alt="Shake photo">
<div class="card-body mb-2">
<h5 class="card-title text-center">Shake</h5>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-5">
<div class="card">
<img class="card-img-top" src="img/roll-over.jpg" alt="Roll over photo">
<div class="card-body mb-2">
<h5 class="card-title text-center">Roll Over</h5>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-5">
<div class="card">
<img class="card-img-top" src="img/spin.jpg" alt="Spin photo">
<div class="card-body mb-2">
<h5 class="card-title text-center">Spin</h5>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-5">
<div class="card">
<img class="card-img-top" src="img/hands-up.jpg" alt="Hands up photo">
<div class="card-body mb-2">
<h5 class="card-title text-center">Hands Up</h5>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<img class="card-img-top" src="img/weave.jpg" alt="Weaving photo">
<div class="card-body mb-2">
<h5 class="card-title text-center">Weave</h5>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<img class="card-img-top" src="img/play-dead.jpg" alt="Playing dead photo">
<div class="card-body mb-2">
<h5 class="card-title text-center">Play Dead</h5>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<img class="card-img-top" src="img/place.jpg" alt="Place photo">
<div class="card-body mb-2">
<h5 class="card-title text-center">Place</h5>
</div>
</div>
</div>
</div>
</div><!-- /tricks -->
<!-- equipment -->
<h1 id="equipment" class="my-5 display-4 text-center">Equipment</h1>
<p class="text-center mb-5">These are the equipment Lexi uses on a day to day basis.</p>
<table class="table table-bordered text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Type</th>
<th scope="col">Brand</th>
<th scope="col">Website</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Collar</td>
<td>Ezy Dog</td>
<td><a href="https://ezydog.com.au/">www.ezydog.com.au</a></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Lead</td>
<td>Ezy Dog</td>
<td><a href="https://ezydog.com.au/">www.ezydog.com.au</a></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Fetch Balls</td>
<td>Chuck It!</td>
<td><a href="http://chuckit-toys.co.uk/">www.chuckit-toys.co.uk</a></td>
</tr>
<tr>
<th scope="row">4</th>
<td>Grooming Brush</td>
<td>FURminator</td>
<td><a href="http://www.furminator.com/">www.furminator.com</a></td>
</tr>
</tbody>
</table>
<!-- /euipment -->
<!-- callout button -->
<a href="https://www.instagram.com/gsdlexi/"><button type="button" class="btn btn-primary btn-lg d-block mx-auto my-5">Lexi on Instagram!</button></a>
<hr>
<p class="text-center small">Copyright © GSD Lexi 2019</p>
</div><!-- /.container -->
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
自定义CSS：
@import url('https://fonts.googleapis.com/css?family=ABeeZee|Amatic+SC:700');
body {
position: relative;
}
.jumbotron {
background-image: url('../img/ft-bg.jpg');
background-size: cover;
}
.navbar-light .navbar-brand {
font-family: 'Amatic SC', bold;
font-size: 2.5rem;
}
#equipment,
#tricks,
#about {
font-family: 'Amatic SC', bold;
}
a:hover {
color: #FF3b3F;
}
.navbar-light .navbar-nav .nav-link {
font-family: 'Amatic SC', bold;
font-size: 2rem;
color: #000;
}
.navbar-light .navbar-nav .nav-link:hover {
color: #FF3b3F;
}
.btn-primary {
color: #000;
background-color: #CAEBF2;
border-color: #CAEBF2;
}
.btn-primary:hover {
color: #fff;
background-color: #FF3b3F;
border-color: #FF3b3F;
}