Bootstrap Scroll Spy with Sticky Navbar 未按预期工作

Question

我在使用 Bootstrap Scrollspy 组件时遇到问题。

我正在使用 sticky-top 导航栏，当点击导航按钮时它会滚动到正确的元素；

但问题是粘性导航栏覆盖了这个元素。

我尝试在 body 标签中使用 data-offset = "50" 但它没有任何影响。

body 标签：

<body data-spy="scroll" data-target="#sectionsNav" data-offset="50">

body 标签 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:

..
<div id="hiw" class="container">
...
..
.
</div>
..

单击导航中的工作原理 按钮时的预期行为：

发生的行为：

请注意： 导航栏在上方 工作原理 header.

编辑

应用@SMAKSS answer 后卷轴起到了魅力的作用。但是出现了另一个问题，在导航栏中突出显示的元素变成了前一个元素。

在下面的屏幕截图中，我按下了 工作原理 并正确滚动，但突出显示的导航栏元素是 What is home eats这是前一个。即，如果我单击 我们解决的问题，工作原理 将变成 selected。它总是 select 前一个。

编辑解决方案

我通过将 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>

Answer 1

这里出现问题是因为当位置为fixed的元素进入播放浏览器时仍会跳转到所需的id但不会确定元素定位仍然存在 所以它会忽略它的 height 并且会跳转到具有特定 id 的元素匹配 window 顶部元素的地方。

所以你现在应该让浏览器在你需要填充的每个滚动中像这样跳跃：

html {
  scroll-padding-top: 70px; /* height of sticky header */
}

这是完整的 article，可能会有更多帮助。

更新

随着我们在这个解决方案上走得更远，因为滚动间谍只会知道我们是否在具有特定 id 的部分中，所以间谍行为崩溃了。因此，要解决此问题，有几种方法，例如根据导航栏 height 或@Raamyy 建议的方法向每个部分添加 padding， 我们可以在 [=] 上定义 data-offset 18=] 标签，同样是固定导航栏的高度 。有关 data-offset 的更多信息，您可以阅读 this。

Answer 2

.invisible-container {
     position: absolute;
     height: calc(100px + 24px); // Height of the sticky/fixed header plus extra padding.
     top: -120px;
     right: 0;
     left: 0;
}

<ul> // Nav
     <li>
          <a href="#targetContainer">...</a>
     </li>
</ul>   
    
<div style="position: relative;"> // The actual target container
     <div id="targetContainer" class="invisible-container"></div>
</div>

Bootstrap Scroll Spy with Sticky Navbar 未按预期工作

Bootstrap Scroll Spy with Sticky Navbar not working as expected

html

css

twitter-bootstrap

scrollspy

bootstrap-4

编辑

编辑解决方案

更新