Bootstrap scrollspy 卡在一个元素上

Question

我正在开发一个基于 Bootstrap 的 wordpress 主题，我正在尝试将 scrollspy 的效果添加到我的导航中，但它只突出显示了我导航的第一个元素，页面已加载（这是错误的，因为它的相应部分在页面中间），然后什么都没有发生。

我的html：

<div class="nav-collapse collapse text-center span4 scrollspy">
    <ul class="nav text-center">
        <li>
                <a href="#section1" >Section 1</a></li>
        <li>
            <a href="#section2">Section 2</a></li>
    </ul>
</div>

还有我用来激活 Scrollspy 的 JS：

$(document).ready(
    $("body").scrollspy({
        target: ".scrollspy"
    })
)

我的页面结构如下：

<section id="zero" style="height: 100vh">
   ...
</section>
<section id="section1" style="height: 100vh">
   ...
</section>
<section id="section2" style="height: 100vh">
   ...
</section>

Answer 1

所以我不确定你的导航栏是什么样子，因为你刚刚发布了导航折叠部分，但对我来说看起来不错。可能您只有 2 个部分，如果您有一个固定的导航栏并且没有指定偏移量，您的第二个部分可能无法到达顶部，因此不会触发活动事件。您的导航栏结构也可能存在一些问题，但我不确定。这可能是您使用$(document).ready( 而不是使用$(document).ready(function(){ 启动滚动间谍的方式，但不确定因为它们在我发布的followig fiddle 演示中都对我有用。下面是我与工作小提琴一起使用的工作代码。如果您希望滚动平滑过渡，我在 scrollspy 启动脚本下方添加了平滑滚动代码。这是我使用的小提琴，它工作得很好Fiddle。

这是我使用的完整导航栏的代码。

  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Logo</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse scrollspy">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#zero">Section Zero</a></li>
          <li><a href="#section1">Section 1</a></li>
          <li><a href="#section2">Section 2</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </nav>



  <section id="zero" style="height: 100vh;background: #222;">
   ...
  </section>
  <section id="section1" style="height: 100vh;background: #555;">
   ...
  </section>
  <section id="section2" style="height: 100vh;background: #888;">
   ...
  </section>

这是我与顶部偏移一起使用的就绪函数

$(document).ready(function(){
    $('body').scrollspy({
        target: ".scrollspy", 
        offset: 50
    });   
});

希望这可以帮助您找出问题所在。