带有粘性导航栏的 Bootstrap Scroll Spy 无法按预期工作
Raa*_*myy 9 html css twitter-bootstrap scrollspy bootstrap-4
我在使用 Bootstrap Scrollspy组件时遇到问题。
我正在使用sticky-top导航栏，当单击导航按钮时，它会滚动到正确的元素；
但问题是粘性导航栏覆盖了这个元素。
我尝试data-offset = "50"在 body 标签中使用，但它没有任何影响。
正文标签：
<body data-spy="scroll" data-target="#sectionsNav" data-offset="50">
正文标签CSS：
body {
position: relative;
overflow-y: auto;
}
导航栏：
<nav class="navbar navbar-light bg-light sticky-top">
<div id="sectionsNav">
<ul class="nav nav-pills text-center">
<li class="nav-item">
<a class="nav-link" href="#wihe">What is Home Eats</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#hiw">How it Works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pws">Problems we Solve</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#jhen">Join Now!</a>
</li>
</ul>
</div>
</nav>
它是如何工作的：
..
<div id="hiw" class="container">
...
..
.
</div>
..
单击导航中的工作原理按钮时的预期行为：
发生的行为：
请注意：导航栏位于上方“工作原理”标题上方。
编辑
应用@SMAKSS 答案后，卷轴发挥了魅力。但是出现了另一个问题，在导航栏中突出显示的元素变成了前一个元素。
在下面的屏幕截图中，我按下了“它是如何工作的”并且它正确滚动，但是突出显示的导航栏元素是“什么是家吃的”，这是前一个。
即如果我点击“我们解决的问题，它是如何运作的”则会选择它总是选择前一个。
编辑解决方案
data-offset我通过将属性加倍为100解决了第二个问题。代码现在看起来像这样：
<head>
<style>
html {
scroll-padding-top: 70px;
}
body {
position: relative;
overflow-y: auto;
}
</style>
</head>
<body data-spy="scroll" data-target="#sectionsNav" data-offset="100">
...
.
</body>
这里的问题发生是因为当具有位置的元素fixed进入播放浏览器时仍会跳转到所需的位置id，但无法确定具有位置修复的元素是否仍然存在，因此它将忽略它height并跳转到具有特定位置的元素的位置id匹配的元素的位置窗口顶部元素。
所以你应该让浏览器现在在每个滚动中需要填充跳跃，如下所示：
html {
scroll-padding-top: 70px; /* height of sticky header */
}
这是完整的文章，可能会有所帮助。
更新
由于我们在这个解决方案上更进一步，因为滚动间谍只会知道我们是否处于具有特定 id 的部分，间谍行为是否崩溃。因此，要解决此问题，有多种方法，例如padding根据导航栏添加到每个部分height或按照 @Raamyy 建议的方法，我们可以在标签上定义，再次使用固定导航栏的高度data-offsetbody。有关更多信息，data-offset您可以阅读此内容。
| 归档时间： |
|
| 查看次数： |
4284 次 |
| 最近记录： |