Bootstrap scrollspy с неработающей боковой панелью навигации

Функция Scrollspy не работает с вертикальной навигационной панелью, которую я создал с помощью групп списков.

Я пробовал использовать класс nav-pill, но столкнулся с той же проблемой.

<div class="col-2" style="background:lightblue">
    <div id="sidenav" class="list-group mt-4" style="top:90px!important;
    position: sticky!important;">
        <a class="list-group-item list-group-item-action" href="#section1">Section 1</a>
        <a class="list-group-item list-group-item-action" href="#section2" >Section 2</a>
        <a class="list-group-item list-group-item-action" href="#section3" >Section 3</a>
    </div>
</div>

<div class="col-10 bg-light text-justify" style="padding: 2rem;" data-spy="scroll" data-target="#sidenav" data-offset="0" class="scrollspy">
    <h1 id="section1">Section 1</h1>
    <p>....</p>

Список должен выделяться всякий раз, когда я перехожу к определенному разделу тела. Но сейчас только «Раздел 3» на боковой панели выделен синим цветом, независимо от того, куда я прокручиваю.


bootstrap-4 scrollspy
person user11662218    schedule 18.06.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте использовать следующий код:

<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
  <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
  <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
  <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
  <h4 id="list-item-1">Item 1</h4>
  <p>...</p>
  <h4 id="list-item-2">Item 2</h4>
  <p>...</p>
  <h4 id="list-item-3">Item 3</h4>
  <p>...</p>
  <h4 id="list-item-4">Item 4</h4>
  <p>...</p>
</div>
person Dhananjay Kyada    schedule 18.06.2019