Question

我正在尝试将Bootstrap 4 scrool-spy添加到我的设计中，但它不起作用。我已经添加了手册中的所有内容，我正在检查其他问题，但我无法弄明白。

我的代码：

    <body>
<div id="test">
      <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"></div>
  <div class="anchor" id="link-aboutTheCompany" ><h1>Company</h1></div>
  <div class="anchor" id="link-staff"><h1>Team</h1></div>
  <div class="anchor" id="link-freeTime"><h1>free time</h1></div>
  <div class="anchor" id="link-contacts"><h1>Contacts</h1></div>
</body>

我的js：

`$('body').scrollspy({ target: '#test' });`

我的小提琴： https://jsfiddle.net/cm5ftLq1/1/

Answer 1

在添加正确的＆＃34; nav-link＆＃34;之后，jsfiddle为我工作。 class to a elements：

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

并按正确的顺序放置联系人和空闲时间div：

<div class="anchor" id="link-contacts"><h1>Contacts</h1></div>
<div class="anchor" id="link-freeTime"><h1>free time</h1></div>

Bootstrap 4滚动间谍无法正常工作

1 个答案: