Bootstrap scrollspy не работает

Я добавил 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 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;
     }
}

An in my js:

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

html twitter-bootstrap scrollspy
person Aina    schedule 29.01.2018    source источник
comment
Было бы полезно добавить это в JSfiddle. Однако я заметил, что js инициализируется с несуществующим идентификатором, а также с целью захвата данных предполагаемым классом, которого также нет в коде.   -  person David Picksley    schedule 29.01.2018
comment
@DavidPicksley идентификатор и класс определены в теге nav, я случайно не скопировал эту часть. Только что отредактировал сообщение.   -  person Aina    schedule 29.01.2018

Ответы (1)


arrow_upward
0
arrow_downward

вы должны указать высоту вашего контента, за которым шпионит ваш scrollspy

Например:

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

Лучший способ: добавьте прослушиватель событий прокрутки в свой DOM.

каждый раз, когда вы прокручиваете, он будет обновлять scrollspy

вот джаваскрипт:

(если в вашем html много imgs)

$(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')
    });
person User10519069    schedule 30.10.2018