Bootstrap scrollspy 导航在固定导航栏中不起作用答案

【问题标题】：Bootstrap scrollspy navigation not working in fixed navbarBootstrap scrollspy 导航在固定导航栏中不起作用
【发布时间】：2018-04-19 11:28:16
【问题描述】：

我在这里使用引导导航：https://bm-translations.de/km

我设置了以下类似official manual，以根据滚动位置自动更新Bootstrap 导航或列表组组件，以指示当前在视口中哪个链接处于活动状态。但它不起作用：

body {
  position: relative;
}

<body data-spy="scroll" data-target="#myNavbar">

为什么这不起作用？我做错了什么？

【问题讨论】：

这里有两个问题：（1）你在你的JS中考虑过TypeError吗？（2）你为什么定位#myNavbar而不是它的父#nav_bar
(1) 是的，我知道这个错误，因为这个功能是为主页而不是在这个子页面上使用的。 (2) 我改了没有成功
在检查器处于活动状态的情况下上下滚动显示正确应用和删除的 CSS 类。您是否检查过您的非 Bootstrap 自定义以确保您不会无意中破坏 ScrollSpy 行为？此外，您似乎正在使用 Bootstrap 3，因此请确保您的手动参考反映了这一点（您链接到 4.x）
@RobertC 我看不到检查员的任何班级变化。你在哪里看到这个？我的自定义只影响类样式。而且我认为引导程序3也可以使用scrollspy，不是吗？并且我在 globalcss.css 和 globaljs.js 中手动添加了 bootstrap 的哪一部分支持 scrollspy？

标签： twitter-bootstrap navigation scrollspy

【解决方案1】：

问题是导航链接中的绝对网址。它们应该只包含哈希而不是完整的 url..

<a itemprop="url" href="#video">

如果您必须使用绝对 url，则可以在 data-target 中指定 Scrollspy 锚点...

<ul class="nav navbar-nav">
    <li class="" itemprop="name"><a itemprop="url" href="https://bm-translations.de/km#video" data-target="#video">Leistungen</a>
        <ul>
            ..
        </ul>
    </li>
    <li itemprop="name" class="active"><a itemprop="url" href="https://bm-translations.de/km#ueber-mich" data-target="#ueber-mich">Über mich</a>
    </li>
    <li itemprop="name" class=""><a itemprop="url" href="https://bm-translations.de/km#kosten" data-target="#kosten">Preise</a>
    </li>
    <li itemprop="name" class=""><a itemprop="url" href="https://bm-translations.de/km#kontakt" data-target="#kontakt">Kontakt</a></li>
</ul>

【讨论】：