Question

我已经按照引导手册添加了Bootstrap scroll-spy到我的页面，但是它不起作用而且不确定我做错了什么

我的代码如下：

体：

<body data-spy="scroll" data-target=".navbar" data-offset="150">

导航：

<nav  class="navbar  navbar-default navbar-toggleable bg-faded navbar-light fixed-top" id="navbar" > 
        <a class="navbar-brand" href="#">
            <img src="../media/logo.png" class=" align-top" alt=""> 
        </a>

     <div class="nav-links collapse navbar-collapse col-lg-10 col-md-10 col-sm-9 col-xs-12" id="collapseNav">
          <ul class="navbar-nav" >
            <li class="nav-item">
                    <a  class="" id="title_boutTheCompany" href="#link-aboutTheCompany">Company</a>

            </li>
            <li class="nav-item">
                    <a  class="" href="#link-staff" id="title_Team">Team</a>

            </li>
            <li class="nav-item">
                    <a class="" href="#link-contacts" id="title_Contact">Contacts</a>

            </li>
            <li class="nav-item dropdown" style="border: none;">
                    <a  class="" href="#link-freeTime" id="title_freeTime">Free time</a>

            </li>
          </ul>
      </div> 
      <div class="navBtn d-sm-none">
            <button class=" navbar-toggler navbar-toggler-right " type="button" data-toggle="collapse" data-target="#collapseNav" aria-controls="collapseNav" aria-expanded="false" aria-label="Toggle navigation" id="toogleIcon">
                   <span class="fa fa-angle-down my-toggler" id="faToggler"></span>
            </button>
       </div>
</nav>

应激活间谍的div：

<div class="anchor" id="link-aboutTheCompany"></div>
<div class="anchor" id="link-staff"></div>
<div class="anchor" id="link-freeTime"></div>
<div class="anchor" id="link-contacts"></div>

在我的scss中我有：

li{
     &:active > a {
       display:block;
       color: red;
       text-decoration: underline;
     }
}

我的js：

$('#navbar').scrollspy();

Answer 1

您必须为您的滚动间谍间谍要提供的内容提供高度

例如：

<body data-spy="scroll" data-target=".navbar" data-offset="150" style="height:1000px;overflow-y:auto;">

更好的方法：将滚动事件侦听器添加到您的DOM

每次滚动时，都会刷新滚动条

这是javascript：

（如果您的html中包含很多img）

$(window).scroll(function(){
    $('[data-spy="scroll"]').each(function () {
      var $spy = $(this).scrollspy('refresh')
    });
});

（如果您的html有一些imgs）

$('[data-spy="scroll"]').each(function () {
      var $spy = $(this).scrollspy('refresh')
    });

Bootstrap scrollspy不起作用

1 个答案: