无法让 Bootstrap ScrollSpy 在我的页面上工作

Question

我阅读了数十个示例和教程，但在我的页面上我无法让 Bootstrap ScrollSpy 工作。这是我的代码：

HTML:

  <div id="nav_bar">
    <div class="container">

        <nav id="nav_anchors">
            <ul class="nav">
                <li><a href="#top">Aktion</a></li>
                <li><a href="#content_produkte">Produkte</a></li>
                <li><a href="#content_tarif">Tarif</a></li>
            </ul>
        </nav>

        <!-- ... some other elements ... -->
    </div>
</div>

JavaScript:

$('body').scrollspy({ target: '#nav_anchors' });

这是我正在开发的页面：

http://www.handyservice.de/de/top-angebote/test-landingpage-4/angebot.html

提前致谢！

Answer 1

问题

根据 docs on scrollspy:

Resolvable ID targets required
Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>.

意味着锚点 href 必须包含且仅包含目标部分的位置哈希。

修复 1 - 仅包含锚点

作品：<a href="#content_tarif">Tarif</a>
不会: <a href="/angebot.html#content_tarif">Tarif</a>

这是 Stack Snippets 中的一个工作示例：

$('body').scrollspy({ target: '#nav_anchors' });

#nav_bar {
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
  border-bottom: 1px solid grey;
}

li.active {
  background: #CFCFFF;
}

body {
  padding-top: 40px;
}

section {
  height: 600px;
  width: 400px;
  border-bottom: 1px solid grey;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div id="nav_bar">
  <div class="container">

    <nav id="nav_anchors">
      <ul class="nav nav-pills">
        <li><a href="#top">Aktion</a></li>
        <li><a href="#content_produkte">Produkte</a></li>
        <li><a href="#content_tarif">Tarif</a></li>
      </ul>
    </nav>

  </div>
</div>

<section id="top">top</section>
<section id="content_produkte">content_produkte</section>
<section id="content_tarif">content_tarif</section>

修复 2 - 添加数据目标属性

如果由于某种原因您无法更改链接的 href 属性，您可以选择为每个锚标记提供 data-target 属性以显式声明目标

您会注意到 scrollspy 选择器将接受其中任何一个。这是 relevant source code:

var selector = this.selector + '[data-target="' + target + '"],' +
               this.selector + '[href="' + target + '"]'

变成这样：

var selector = '#nav_anchors .nav li > a[data-target="#content_tarif"],' + 
               '#nav_anchors .nav li > a[href="#content_tarif"]'

因此，如果您像这样更新链接，scrollspy 将正常工作：

<a href="de/#content_tarif" data-target="#content_tarif">Tarif</a>

这是 Stack Snippets 中的一个工作示例：

$('body').scrollspy({ target: '#nav_anchors' });

#nav_bar {
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
  border-bottom: 1px solid grey;
}

li.active {
  background: #CFCFFF;
}

body {
  padding-top: 40px;
}

section {
  height: 600px;
  width: 400px;
  border-bottom: 1px solid grey;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div id="nav_bar">
  <div class="container">

    <nav id="nav_anchors">
      <ul class="nav nav-pills">
        <li><a href="de/#top" data-target="#top">Aktion</a></li>
        <li><a href="de/#content_produkte" data-target="#content_produkte">content_produkte</a></li>
        <li><a href="de/#content_tarif" data-target="#content_tarif">Tarif</a></li>
      </ul>
    </nav>

  </div>
</div>

<section id="top">top</section>
<section id="content_produkte">content_produkte</section>
<section id="content_tarif">content_tarif</section>

无法让 Bootstrap ScrollSpy 在我的页面上工作

Can't get Bootstrap ScrollSpy to work on my page

twitter-bootstrap

scrollspy

问题

修复 1 - 仅包含锚点

修复 2 - 添加数据目标属性