Bootstrap4 滾動(dòng)監(jiān)聽

滾動(dòng)監(jiān)聽（Scrollspy）插件，即自動(dòng)更新導(dǎo)航插件，會(huì)根據(jù)滾動(dòng)條的位置自動(dòng)更新對(duì)應(yīng)的導(dǎo)航目標(biāo)。其基本的實(shí)現(xiàn)是隨著您的滾動(dòng)。

如何創(chuàng)建滾動(dòng)監(jiān)聽

以下實(shí)例演示了如何創(chuàng)建滾動(dòng)監(jiān)聽：

實(shí)例

<body data-spy="scroll" data-target=".navbar" data-offset="50">  <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>  <div id="section1"> <h1>Section 1</h1> <p>Try to scroll this page and look at the navigation bar while scrolling!</p> </div> ... </body>

運(yùn)行代碼 ?

實(shí)例解析

向您想要監(jiān)聽的元素（通常是 body）添加 data-spy="scroll" 。

然后添加 data-target 屬性，它的值為導(dǎo)航欄的 id 或 class (.navbar)。這樣就可以聯(lián)系上可滾動(dòng)區(qū)域。

注意可滾動(dòng)項(xiàng)元素上的 id （<div id="section1">）必須匹配導(dǎo)航欄上的鏈接選項(xiàng) （<a href="#section1">)。

可選項(xiàng)data-offset 屬性用于計(jì)算滾動(dòng)位置時(shí)，距離頂部的偏移像素。默認(rèn)為 10 px。

設(shè)置相對(duì)定位: 使用 data-spy="scroll" 的元素需要將其 CSS position 屬性設(shè)置為 "relative" 才能起作用。

以下實(shí)例設(shè)置了垂直滾動(dòng)監(jiān)聽：

實(shí)例

<body data-spy="scroll" data-target="#myScrollspy" data-offset="1"> <div class="container-fluid"> <div class="row"> <nav class="col-sm-3 col-4" id="myScrollspy"> <ul class="nav nav-pills flex-column"> <li class="nav-item"> <a class="nav-link active" href="#section1">Section 1</a> </li> ... </ul> </nav> <div class="col-sm-9 col-8"> <div id="section1"> <h1>Section 1</h1> <p>Try to scroll this page and look at the navigation list while scrolling!</p> </div> ... </div> </div> </div> </body>

運(yùn)行代碼 ?

上一篇：Bootstrap4 彈出框下一篇：Bootstrap4 小工具