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(){来启动scrollspy的方式，但不是很确定，因为它们在我发布的followig fiddle demo中都适合我。下面是我使用的工作代码以及工作小提琴。如果您希望滚动具有平滑过渡，我在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
    });   
});

希望这可以帮助您找出出错的地方。

Bootstrap scrollspy卡在一个元素上

1 个答案: