带有粘性导航栏的Bootstrap滚动间谍无法正常工作

Question

我在Bootstrap Scrollspy组件方面遇到问题。

我正在使用sticky-top导航栏，并且单击导航按钮时，它将滚动到正确的元素；

但是问题是粘性导航栏正在覆盖此元素。

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

正文标签：

<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的工作方式：

..
<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>

Answer 1

这里发生问题是因为当位置为fixed的元素进入播放浏览器时仍会跳至所需的id，但不能确定位置为固定的元素仍然存在忽略其height并将跳转到具有特定id的元素与窗口顶部元素匹配的位置。

因此，您现在应该让浏览器进入每个需要滚动的滚动条，如下所示：

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

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

更新

我们在此解决方案上走得更远，因为滚动间谍只会知道我们是否位于具有特定ID的区域中，否则间谍行为不会崩溃。因此，要解决此问题，可以采用多种方法，例如根据导航栏padding将height添加到每个部分中，或者作为@Raamyy建议的方法，我们可以在data-offset标签上定义body，再次使用固定导航栏。有关data-offset的更多信息，您可以阅读this。

带有粘性导航栏的Bootstrap滚动间谍无法正常工作

问题描述投票：1回答：1

编辑

编辑解决方案

1个回答

更新

最新问题

带有粘性导航栏的Bootstrap滚动间谍无法正常工作

问题描述 投票：1回答：1

编辑

编辑解决方案

1个回答

更新

最新问题

问题描述投票：1回答：1