Bootstrap4（28）：滚动监听(Scrollspy)

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

一、如何创建滚动监听

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

向您想要监听的元素（通常是 body）添加 data-spy="scroll" 。

然后添加 data-target 属性，它的值为导航栏的 id 或 class (.navbar)。这样就可以联系上可滚动区域。

注意可滚动项元素上的 id （

）必须匹配导航栏上的链接选项（)。

可选项data-offset 属性用于计算滚动位置时，距离顶部的偏移像素。默认为 10 px。

设置相对定位: 使用 data-spy="scroll" 的元素需要将其 CSS position 属性设置为 "relative" 才能起作用。


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 1a>li>
    ...
nav>
 

div id="section1">
  h1>Section 1h1>
  p>Try to scroll this page and look at the navigation bar while scrolling!p>
div>
...
 
body>

尝试一下 »

二、设置垂直滚动监听：

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 1a>
          li>
          ...
        ul>
      nav>
      div class="col-sm-9 col-8">
        div id="section1"> 
          h1>Section 1h1>
          p>Try to scroll this page and look at the navigation list while scrolling!p>
        div> 
        ...
      div>
    div>
  div>
 
body>

尝试一下 »

相关阅读:
vue项目实现路由按需加载
常用的meta标签
聊聊https
Centos 7 忘记root密码修改方法
find常用命令
linux上的mysql忘记密码
kaill 安装zenmap软件
selenium.common.exceptions.WebDriverException: Message: 'chromedriver'解决
centos7 开机执行脚本或者命令
Linux下载常用命令

原文地址：https://www.cnblogs.com/springsnow/p/12134086.html

Bootstrap4（28）： 滚动监听(Scrollspy)

一、如何创建滚动监听

二、设置垂直滚动监听：

相关推荐

Bootstrap4（28）：滚动监听(Scrollspy)