首页 Bootstrap5组件手册

body滚动监听


<body data-bs-spy="scroll" data-bs-target="#daohang" data-bs-offset="50">
自定义属性：
data-bs-spy="scroll"            监听滚动
data-bs-target="#daohang"       绑定导航栏
data-bs-offset="50"             校正偏移（每部分内容与顶部位置，让导航可以准确的指示是那一部分）

示例1

<body data-bs-spy="scroll" data-bs-target="#daohang" data-bs-offset="50">
  <!--导航栏-->
  <nav id="daohang" class="container-fluid navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#nr1">第一部</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#nr2">第二部</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#nr3">第三部</a>
      </li>
    </ul>
  </nav>
  
  <!--容器内容-->
  <div id="nr1" class="container-fluid bg-secondary text-white" style="padding:100px 20px;">
    <h1>第一部</h1>
    <p>内容。。。。。。。。。。。。。。。。。。。。。。。。。。</p>
  </div>
  <div id="nr2" class="container-fluid bg-dark text-light" style="padding:100px 20px;">
    <h1>第二部</h1>
    <p>内容。。。。。。。。。。。。。。。。。。。。。。。。。。</p>
  </div>
  <div id="nr3" class="container-fluid bg-light" style="padding:100px 20px;">
    <h1>第三部</h1>
    <p>内容。。。。。。。。。。。。。。。。。。。。。。。。。。</p>
  </div>
</body>

示例2

<body data-bs-spy="scroll" data-bs-target="#daohang" data-bs-offset="50">
  <!--导航栏-->
  <ul class="container-fluid nav nav-pills bg-dark fixed-top" id="daohang">
    <li class="nav-item">
      <a class="nav-link text-light" href="#nr1">链接1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link text-light" href="#nr2">链接2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link text-light" href="#nr3">链接3</a>
    </li>
  </ul>
  
  <!--容器内容-->
  <div id="nr1" class="container-fluid bg-secondary text-white" style="padding:100px 20px;">
    <h1>第一部</h1>
    <p>内容。。。。。。。。。。。。。。。。。。。。。。。。。。</p>
  </div>
  <div id="nr2" class="container-fluid bg-dark text-light" style="padding:100px 20px;">
    <h1>第二部</h1>
    <p>内容。。。。。。。。。。。。。。。。。。。。。。。。。。</p>
  </div>
  <div id="nr3" class="container-fluid bg-light" style="padding:100px 20px;">
    <h1>第三部</h1>
    <p>内容。。。。。。。。。。。。。。。。。。。。。。。。。。</p>
  </div>
</body>

div滚动监听


<div class="scrollspy-example" data-bs-spy="scroll" data-bs-target="#daohang" data-bs-offset="0">

基本类：（创建可滚动区域）
.scrollspy-example               list 列表时用
.scrollspy-example-2            nav、bavbar 导航时用

自定义属性：
data-bs-spy="scroll"             监听滚动
data-bs-target="#daohang"  绑定导航栏
data-bs-offset="50"              校正偏移（每部分内容与顶部位置，让导航可以准确的指示是那一部分）

示例


<div class="row">
    <div class="col-4">
        <div id="daohang" class="list-group">
            <a class="list-group-item list-group-item-action" href="#nr1">Item 1</a>
            <a class="list-group-item list-group-item-action" href="#nr2">Item 2</a>
            <a class="list-group-item list-group-item-action" href="#nr3">Item 3</a>
        </div>
    </div>
    <div class="col-8">
        <div class="scrollspy-example" data-bs-spy="scroll" data-bs-target="#daohang" data-bs-offset="0">
            <h3 id="nr1">标题1</h3>
            <p>内容。。。。。。。</p>
            <h3 id="nr2">标题2</h3>
            <p>内容。。。。。。。</p>
            <h3 id="nr3">标题3</h3>
            <p>内容。。。。。。。</p>
       </div>
    </div>
</div>