实例 Boottrap 创建一个垂直目录的 scrollspy 滚动监听

x
 
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Example</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;
        }
        ul.nav-pills {
            top: 20px;
            position: fixed;
        }
        div.col-sm-9 div {
            height: 250px;
            font-size: 28px;
        }
        #section1 {
            color: #fff;
            background-color: #1E88E5;
        }
        #section2 {
            color: #fff;
            background-color: #673ab7;
        }
        #section3 {
            color: #fff;
            background-color: #ff9800;
        }
        #section41 {
            color: #fff;
            background-color: #00bcd4;
        }

输出结果