Search code examples
twitter-bootstrapscrollspy

Bootstrap 4 scroll-spy not working

I'm trying to add Bootstrap 4 scrool-spy to my design but it does not work. I have added everything that the manual says and I was checking other questions, but I can't figure this out.

My code:

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

My js:

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

My fiddle: https://jsfiddle.net/cm5ftLq1/1/

Solution

  • The jsfiddle works for me after adding the correct "nav-link" class to the a elements:

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

    and putting the contacts and freetime divs in the correct order:

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