11.21 学习记录

Bootstrap5 滚动监听(Scrollspy)

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。

如何创建滚动监听

以下实例演示了如何创建滚动监听：

实例

<!-- 可滚动区域 --> <body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50"> <!-- 导航栏 - <a> 元素用于跳到指定滚动区域 --> <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... <ul class="navbar-nav"> <li><a href="#section1">Section 1</a></li> ... </nav> <!-- Section 1 --> <div id="section1"> <h1>Section 1</h1> <p>Try to scroll this page and look at the navigation bar while scrolling!</p> </div> ... </body>

尝试一下 »
posted @ 2021-11-21 10:16  While！true  阅读(52)  评论(0)  编辑  收藏  举报