Question

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

我将official manual设置为以下内容，以根据滚动位置自动更新Bootstrap导航或列出组组件，以指示视口中当前处于活动状态的链接。但它不起作用：

body {
  position: relative;
}

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

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

Answer 1

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

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

如果您必须使用绝对网址，您可以在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>

Bootstrap scrollspy导航无法在固定导航栏中工作

1 个答案: