【发布时间】：2020-06-11 11:40:48
【问题描述】：
我已尝试修复此错误几天，但似乎没有谷歌搜索或旧答案可以解决此问题。
我已经添加了一个置顶导航栏，它位于我的身体内（在 jumbotron 英雄图像下方，也在身体内）。我添加了平滑滚动，一切正常。但是，当我单击一个链接并向下滚动时，它会将容器的开头与内容重叠。
我已经尝试按照我看到的建议在我的身体上添加 padding-top 和 margin，但它会将填充放在 jumbotron (.hero) 上方。然后我尝试将我的 jumbotron 和 nav 从正文中取出并将它们放在页眉中，这确实解决了重叠问题，但 nav 不再粘在页面顶部（这可能是它解决问题的原因！）
css 中似乎没有任何溢出会导致这种情况。
这是我第一次尝试编写代码，所以我的想法已经用完了。有人对为什么会发生这种情况有任何建议或理由吗？
我已经在 jsfiddle (https://jsfiddle.net/ahronpeskin/gbmsket1) 中设置了它，它似乎在我的 jumbotron 和导航栏之间添加了一个空白 - 平滑滚动不起作用，但单击链接有同样的问题。
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%;
}
【问题讨论】：
-
您好，欢迎来到社区，您能在 jsfiddle 中重现该问题吗？以便正确检查和理解。
-
对不起，您刚刚提供的小提琴链接上没有任何内容。
-
@GagandeepSingh - 谢谢我已经删除并重新添加了我的链接！我已将所有代码复制到 jsfiddle 中。它似乎在我的 jumbotron 和导航栏之间添加了一个空白区域 - 平滑滚动不起作用，但单击链接有同样的问题。 (jsfiddle.net/ahronpeskin/gbmsket1)
-
请将 jsfiddle URL 移到原帖正文中。
标签： html css nav sticky smooth-scrolling