Scrollspy活动部分未在导航栏上更新

时间:2019-05-08 11:09:18

标签: html css bootstrap-4 navbar scrollspy

scrollspy上的活动部分未在导航栏上更新。我不确定是否缺少脚本,或者代码中是否有错误。

脚本

    /* Navbar Spyscroll */
    $('body').scrollspy({ target: '#navspy' })
    $('[data-spy="scroll"]').each(function () {
      var $spy = $(this).scrollspy('refresh')
    })

代码

<nav id="spynav" class="navbar navbar-light bg-transparent d-flex">
   <a class="navbar-brand mx-auto" href="#1">
   <img src="images/guy.png" alt="logo" style="width:85px;padding-bottom: 10px"></a>
   <nav class="nav nav-pills flex-column align-self-center mx-auto">
      <a class="nav-link active" href="#1">1</a>
      <a class="nav-link" href="#2">2</a>
      <a class="nav-link" href="#3">3</a>
      <a class="nav-link" href="#4">4</a>
      <a class="nav-link" href="#5">5</a>
      <a class="nav-link" href="#6">6</a>
      <nav class="nav nav-pills flex-column">
         <a class="nav-link ml-3 my-1" href="#71">71</a>
         <a class="nav-link ml-3 my-1" href="#72">72</a>
         <a class="nav-link ml-3 my-1" href="#73">73</a>
      </nav>
   </nav>
</nav>

我希望活动部分会基于scrollspy跟随导航栏,但是一旦我开始滚动,它就会锁定在#73上。

1 个答案:

答案 0 :(得分:0)

这是我找到的解决方案。希望对其他人有帮助。

$(document).ready(function(){
    $('body').scrollspy({target: ".navbar"});
});
相关问题