我正在尝试在Bootstrap 4中使用列表组实现Scrollspy,但是它不起作用。滚动内容包含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文档所示,在scrollspy元素的父元素上使用适当的数据属性...
<body data-spy="scroll" data-target="#fixed-menu" data-offset="0">
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句