教程 > Bootstrap 4 教程 > Bootstrap 4 高级 阅读：62

Bootstrap4 滚动监听（ScrollSpy）

Bootstrap scrollspy 是一种导航机制，它根据滚动位置自动突出显示导航链接，以指示访问者当前在页面上的位置。

如果使用书签链接将访问者引导到包含大量内容的页面的不同部分，scrollspy 将使您的网页更加优雅和易于访问。

Scrollspy 有以下要求才能正常运行：

  • 它必须用于 Bootstrap 导航或列表组组件。
  • 您必须应用样式 position:relative; 在您监视的元素上，通常是 <body> 元素。 但是，如果您正在监视 <div> 或 <body> 以外的任何元素，请确保另外应用高度和溢出-y：滚动； 在上面。
  • 锚点 (<a>) 是必需的，并且必须指向具有该 id 的元素。

这是使用列表组的滚动监听示例。 让我们尝试一下，看看它是如何工作的：

<body data-spy="scroll" data-offset="15" data-target="#myScrollspy">
    <div class="container">
        <div class="row">
            <div class="col-sm-3" id="myScrollspy">
                <div class="list-group">
                    <a class="list-group-item list-group-item-action active" href="#section1">Section One</a>
                    <a class="list-group-item list-group-item-action" href="#section2">Section Two</a>
                    <a class="list-group-item list-group-item-action" href="#section3">Section Three</a>
                </div>
            </div>
            <div class="col-sm-9">
                <div id="section1">
                    <h2>Section One</h2>
                    <p>This is section one content...</p>
                </div>
                <hr>
                <div id="section2">
                    <h2>Section Two</h2>
                    <p>This is section two content...</p>
                </div>
                <hr>
                <div id="section3">
                    <h2>Section Three</h2>
                    <p>This is section three content...</p>
                </div>
            </div>
        </div>
    </div>
</body>

尝试一下

通过 data 属性创建 ScrollSpy

我们可以通过 data 属性轻松地将滚动监视行为添加到导航栏，而无需编写任何 JavaScript 代码。 让我们试试下面的例子，看看它是如何工作的：

<body data-spy="scroll" data-offset="60" data-target="#myNavbar">
    <nav id="myNavbar" class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
        <div class="container">
            <a href="#" class="navbar-brand">Navbar</a>
            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="nav navbar-nav">
                    <li class="nav-item">
                        <a href="#section1" class="nav-link">Section 1</a>
                    </li>
                    <li class="nav-item">
                        <a href="#section2" class="nav-link">Section 2</a>
                    </li>
                    <li class="nav-item">
                        <a href="#section3" class="nav-link">Section 3</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Section 4<b class="caret"></b></a>
                        <div class="dropdown-menu">
                            <a href="#section4dot1" class="dropdown-item">Section 4.1</a>
                            <a href="#section4dot2" class="dropdown-item">Section 4.2</a>
                            <a href="#section4dot3" class="dropdown-item">Section 4.3</a>
                        </div>
                    </li>
                    <li>
                        <a href="#section5" class="nav-link">Section 5</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container">
        <div id="section1">
            <h2>Section 1</h2>
            <p>This is section 1 content...</p>
        </div>
        <hr>
        <div id="section2">
            <h2>Section 2</h2>
            <p>This is section 2 content...</p>
        </div>
        <hr>
        <div id="section3">
            <h2>Section 3</h2>
            <p>This is section 3 content...</p>
        </div>
        <hr>
        <h2>Section 4</h2>
        <p>This is section 4 content</p>
        <div id="section4dot1">
            <h3>Section 4.1</h3>
            <p>This is section 4.1 content...</p>
        </div>
        <div id="section4dot2">
            <h3>Section 4.2</h3>
            <p>This is section 4.2 content...</p>
        </div>
        <div id="section4dot3">
            <h3>Section 4.3</h3>
            <p>This is section 4.3 content...</p>
        </div>
        <hr>
        <div id="section5">
            <h2>Section 5</h2>
            <p>This is section 5 content...</p>
        </div>
    </div>
</body>

尝试一下

你可能想知道这段代码是关于什么的。 好吧，为了更好的理解，让我们将这个scrollspy示例代码的每一部分都一一梳理一遍。

通过 JavaScript 创建 ScrollSpy

也可以使用 JavaScript 手动添加 scrollspy — 只需在 JavaScript 代码中使用导航栏的 id 或类选择器调用 scrollspy() Bootstrap 方法即可。

$(document).ready(function(){
    $("body").scrollspy({
        target: "#myNavbar",
        offset: 70
    }) 
});

尝试一下

查看笔记

扫码一下
查看教程更方便