我正在尝试实现 Scrollspy with list group在 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;
}
最佳答案
如Bootstrap docs所示，在 scrollspy 元素的父级上使用适当的数据属性...
<body data-spy="scroll" data-target="#fixed-menu" data-offset="0">
关于javascript - 带有列表组的 Bootstrap 4 scrollspy 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50797881/