gpt4 book ai didi

javascript - Bootstrap Scrollspy 无法检测导航

转载 作者:行者123 更新时间:2023-11-28 03:14:41 27 4
gpt4 key购买 nike

我正在为我的学校建立一个竞选网站。我正在实现一个侧边栏,它在视口(viewport)中改变网站不同部分的颜色。我无法让 scrollspy 工作。

这是我的:https://codepen.io/aahlfeeyann/pen/oeBGdq

<body data-spy="scroll" data-target="#sidebar">
<div class="wrapper">
<nav id="sidebar">
<ul class="sidebar visible">
<li id="step1" class="active">
<a href="#hero">
<span>Home</span>
</a>
</li>
<li id="step2">
<a href="#about">
<span>About this Campaign</span>
</a>
</li>
<li id="step3">
<a href="#mvps">
<span>Our Participants</span>
</a>
</li>
<li id="step4">
<a href="#appreciation">
<span>How to fight Procrastination</span>
</a>
</li>
<li id="step5">
<a href="#details">
<span>Event Details</span>
</a>
</li>
<li id="step6">
<a href="#team">
<span>Our Team!</span>
</a>
</li>
</ul>
</nav>
<div class="bg-wrapper">
<div class="section" id="hero">
</div>
<div class="section" id="about">
<h1>About the Campaign</h1>
</div>
<div class="section" id="mvps">
<h1>Our Participants</h1>
</div>
<div class="section" id="appreciation">
<h1>Appreciation...?</h1>
</div>
<div class="section" id="details">
<h1>Event Information</h1>
</div>
<div class="section" id="team">
<h1>About the Team</h1>
</div>
</div>
</div>

</body>

最佳答案

nav 类添加到ul 元素。根据 Bootstrap 文档

Scrollspy currently requires the use of a Bootstrap nav component for proper highlighting of active links.

HTML

<ul class="sidebar visible nav">
.....
...
..
.
</ul>

Scrollspy Docs Reference

希望这有帮助..

关于javascript - Bootstrap Scrollspy 无法检测导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45534886/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com