Scrollspy active 不适用于 bootstrap 5
Scrollspy active not working with bootsrap 5
我需要帮助。我使用了 Bootstrap 示例中的代码,但它不起作用。
我把数据目标放在 Javascript 上,我也把数据目标放在正文上。
该代码是从 bootstrap-5 scrollspy 完整复制的,但我不完全理解如何使用它。感谢您的帮助。
$('body').scrollspy({ target: '#navbar-example2' });
<body data-target="#navbar-example2">
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3 fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading1">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading3">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading4">My Project</a>
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<section id="scrollspyHeading1">
</section>
<section id="scrollspyHeading2">
</section>
<section id="scrollspyHeading3">
</section>
<section id="scrollspyHeading4">
</section>
</div>
</body>
如 Bootstrap 5 docs..
中所述
"Scrollable containers and keyboard access If you’re making a
scrollable container (other than the ), be sure to have a height
set and overflow-y: scroll;..."
例如,
.scrollspy-example {
position: relative;
height: 300px;
overflow: auto;
}
我需要帮助。我使用了 Bootstrap 示例中的代码,但它不起作用。
我把数据目标放在 Javascript 上,我也把数据目标放在正文上。 该代码是从 bootstrap-5 scrollspy 完整复制的,但我不完全理解如何使用它。感谢您的帮助。
$('body').scrollspy({ target: '#navbar-example2' });
<body data-target="#navbar-example2">
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3 fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading1">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading3">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading4">My Project</a>
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<section id="scrollspyHeading1">
</section>
<section id="scrollspyHeading2">
</section>
<section id="scrollspyHeading3">
</section>
<section id="scrollspyHeading4">
</section>
</div>
</body>
如 Bootstrap 5 docs..
中所述"Scrollable containers and keyboard access If you’re making a scrollable container (other than the ), be sure to have a height set and overflow-y: scroll;..."
例如,
.scrollspy-example {
position: relative;
height: 300px;
overflow: auto;
}