实例 Boottrap 创建一个 scrollspy 滚动监听

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
    <style>
        body {
            position: relative;
        }

#section1 {
            padding-top: 50px;
            height: 500px;
            color: #fff;
            background-color: #1E88E5;
        }

#section2 {
            padding-top: 50px;
            height: 500px;
            color: #fff;
            background-color: #673ab7;
        }

#section3 {
            padding-top: 50px;
            height: 500px;
            color: #fff;
            background-color: #ff9800;
        }

#section41 {
            padding-top: 50px;
            height: 500px;
            color: #fff;
            background-color: #00bcd4;
        }

#section42 {
            padding-top: 50px;
            height: 500px;
            color: #fff;
            background-color: #009688;
        }
    </style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<div id="section1" class="container-fluid">
        <h1>章节 1</h1>
        <p>尝试滚动此部分，并在滚动时查看导航栏！ 尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏！</p>
        <p>尝试滚动此部分，并在滚动时查看导航栏！ 尝试滚动此部分，并在滚动时查看导航栏！</p>
    </div>
    <div id="section2" class="container-fluid">
        <h1>章节 2</h1>
        <p>尝试滚动此部分，并在滚动时查看导航栏！ 尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏！</p>
        <p>尝试滚动此部分，并在滚动时查看导航栏！ 尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏！</p>
    </div>
    <div id="section3" class="container-fluid">
        <h1>章节 3</h1>
        <p>尝试滚动此部分，并在滚动时查看导航栏！ 尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏！</p>
        <p>尝试滚动此部分，并在滚动时查看导航栏！ 尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏！</p>
    </div>
    <div id="section41" class="container-fluid">
        <h1>章节 4 Submenu 1</h1>
        <p>尝试滚动此部分，并在滚动时查看导航栏！ 尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏！</p>
        <p>尝试滚动此部分，并在滚动时查看导航栏！ 尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏！</p>
    </div>
    <div id="section42" class="container-fluid">
        <h1>章节 4 Submenu 2</h1>
        <p>尝试滚动此部分，并在滚动时查看导航栏！ 尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏！</p>
        <p>尝试滚动此部分，并在滚动时查看导航栏！ 尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏！</p>
    </div>

​x
 
<!DOCTYPE html><html><head>    <title>Bootstrap 实例</title>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">    <style>        body {            position: relative;        }​        #section1 {            padding-top: 50px;            height: 500px;            color: #fff;            background-color: #1E88E5;        }​        #section2 {            padding-top: 50px;            height: 500px;            color: #fff;            background-color: #673ab7;        }​        #section3 {            padding-top: 50px;            height: 500px;            color: #fff;            background-color: #ff9800;        }​        #section41 {            padding-top: 50px;            height: 500px;            color: #fff;            background-color: #00bcd4;        }​        #section42 {            padding-top: 50px;

参考手册

实例 Boottrap 创建一个 scrollspy 滚动监听

输出结果