Я пытаюсь реализовать Scrollspy с группой списков в Bootstrap 4, но это не работает.Содержимое прокрутки содержит data-spy="scroll" data-target="#fixed-menu" data-offset="0", а меню содержит id="fixed-menu".
Вот jsfiddle
html
<main class="Site-content">
<div class="view">
<div class="container-full">
<div class="row ml-1">
<div className="col col-10 ml-1" data-spy="scroll" data-target="#fixed-menu" data-offset="0">
<h3>Create</h3>
<div id="main1" class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Main1</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
<div id="main2" class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Main2</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
<div id="main3" class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Main3</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
<div id="main4" class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Main4</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div
id="fixed-menu"
class="list-group fixedMenu"
>
<a class="list-group-item list-group-item-action listItem__link d-flex py-2 px-3" href="#main1">
Main1
</a>
<a class="list-group-item list-group-item-action listItem__link d-flex py-2 px-3" href="#main2">
Main2
</a>
<a
class="list-group-item list-group-item-action listItem__link d-flex py-2 px-3"
href="#main3"
>
Main3
</a>
<a
class="list-group-item list-group-item-action listItem__link d-flex py-2 px-3"
href="#main4"
>
Main4
</a>
</div>
</div>
</div>
</div>
</main>
css
.Site-content{
flex: 1;
}
.fixedMenu{
width: 110px;
position: fixed;
right: 0;
}