Bootstrap Scrollspy卡在一个元素

我正在开发一个基于Bootstrap的WordPress主题，我试图添加Scrollspy的效果到我的导航，但它只突出了我的导航的第一个元素去页面加载（这是错误的，因为它在页面中间的相应部分），然后没有其他事情发生。Bootstrap 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>

而且JS与我尝试激活Scrollspy：

$(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>

来源

2016-03-04 frollo

身上有“pos：rel”吗？ – dandavis

是的，我把它设置在我的css – frollo

以及如果部分是块，我不知道，但你可以尝试刷新方法（http://getbootstrap.com/javascript/#scrollspy-methods）onload或者什么的，也许你的页面正在花费一些时间来“启动”，SS错过了船。 – dandavis

所以我不确定你的导航栏是什么样的，因为你刚刚发布了导航崩溃部分，但对我来说看起来很好。这可能是因为你只有2个部分，如果你有一个固定的导航栏，并没有指定偏移量，你的第二部分可能没有达到顶部，因此不会触发活动事件。您的导航栏结构也可能存在一些问题，但我并不确定。这可能是你用$(document).ready(而不是使用$(document).ready(function(){来创建scrollspy的方式，但不是很确定，因为他们都在我发布的followig小提琴演示中为我工作。以下是我与一个工作小提琴一起使用的工作代码。如果您希望滚动文件平滑过渡，我在滚动启动脚本下添加了一个平滑的滚动代码。这里是我用过的小提琴，它工作得很好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 
    }); 
});

希望这有助于你找出其中的事情会出错。

来源

2016-03-04 21:18:30

它并没有解决我的问题（我决定放弃，我会把一些不太喜欢scrollspy的地方，我已经在这个问题上花费了太多的时间），但是你的回答帮助我在我的导航中添加了一些命令，所以无论如何谢谢你。 – frollo

Bootstrap Scrollspy卡在一个元素

回答

相关问题