我已尝试修复此错误几天，并且似乎没有谷歌搜索或旧答案可以解决此问题。
我添加了一个位于我体内的粘性顶部导航栏（在巨型英雄图像的下方，也位于人体内部）。我添加了平滑滚动，一切正常。但是，当我单击链接并向下滚动时，它与内容的容器开头重叠。
我尝试按照我的建议尝试在我的身体上添加padding-top和margin，但是它将padding放在了jumbotron（.hero）上方。然后，我尝试将超大型导航仪和导航仪从身体中取出，并将其放置在页眉中，这确实解决了重叠问题，但导航仪不再停留在页面顶部（这可能就是为什么它可以解决此问题！）] >
似乎在CSS中没有任何溢出会导致此问题。
这是我第一次编写代码，因此我的想法已经用完了。是否有人对此有任何建议或原因？
我已经在jsfiddle（https://jsfiddle.net/ahronpeskin/gbmsket1）中进行了设置，似乎在我的超大屏幕显示器和导航栏之间添加了一个空格-平滑滚动不起作用，但是单击链接也有同样的问题。
HTML
<body data-spy="scroll" data-target="#navbarText">
<!--hero image-->
<div class="jumbotron jumbotron-fluid hero">
<div class="container">
<h1>Jill Peskin Counselling</h1>
<p>
Here for you when you need it most
</p>
</div>
</div>
<!--navbar-->
<nav class="navbar sticky-top navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">Jill Peskin Counselling</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#jill">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#training">Training and Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Me</a>
</li>
</ul>
<span class="navbar-text">
Here for you when you need it most
</span>
</div>
</nav>
CSS
body{
position: relative;
}
/*hero image*/
.hero{
background: url(Images/zen.jpg) fixed center no-repeat;
background-size: cover;
padding: 400px;
text-transform: none;
color:white;
margin-bottom: 0;
}
/*navbar*/
.sticky {
position: fixed;
top: 0;
width: 100%;
}
我已尝试修复此错误几天，并且似乎没有谷歌搜索或旧答案可以解决此问题。我添加了一个位于我体内的顶部导航栏（在巨型英雄图像下方，...
代替JQuery-Slim使用常规的缩小JQuery。