我正在寻找我的bootstrap导航栏的帮助。链接滚动到所需的div，但使用固定的导航，它滚动太远。我知道我可以用Bootstrap的滚动间谍来做这件事，但它对我不起作用。有人能告诉我哪里出错了。提前致谢
<body data-spy="scrollNav" data-target=".navbar" data-offset="50">
<nav id="scrollNav" class=" navbar navbar-expand-md navbar-fixed- top navbar-custom navbar-dark">
<a class="navbar-brand suggest-logo" href="#">
<i class="fa fa-play-circle"></i>
<span class="logo">The </span>Band</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="ml-auto navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#tracks">Tracks</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#live">Live</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#insta">Social</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li>
<a class="facebook social-pixel" href="https://www.facebook.com/"><i class="fa fa-facebook-square" aria-hidden="true"></i></a>
</li>
<li>
<a class="social-pixel" href="https://www.instagram.com/"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</li>
<li>
<a class="social-pixel" href="https://twitter.com/">
<i class="fa fa-twitter fa" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</nav>
---------------
<div class="container-fluid" id="tracks">
<div class="row">
<div class="col-lg-4 image">
<img class="song-image" href="images">
</div>
</div>
</div>
<div class="about container-fluid" >
<div class="row" id="live" data-offset="100">
<div class="col-md-6">
<a href="https://www.pub.com" target="_blank">Click</a>
</div>
</div>
</div>
//我的JS
$('body').scrollspy({ target: '#scrollNav' });