Bootstrap滚动监听

水平导航栏滚动监听

• 先添加水平导航条
• 将要滚动显示的内容添加到div里，给div设置高度和overflow: scroll;属性
• 给导航条设置id属性，将其id属性值通过data-target链接到滚动条上
• 想要设置滑动滚动条，上面导航条的选项跟着变化，需要给每部分滑动显示的内容加个id属性，链接到导航条的href属性里。
• 给滑动内容外侧的div设置data-spy="scroll"（滚动显示）和data-offset="80"（偏移量，可任意大于0的数值）的属性
  练习：

        <nav id="mynav" class="navbar navbar-expand-md navbar-dark bg-dark">
            <span class="navbar-brand">LOGO</span>
            <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbar">
                <div class="navbar-nav ml-auto">
                    <a class="nav-item nav-link" href="#one">菜单1</a>
                    <a class="nav-item nav-link" href="#two">菜单2</a>
                    <a class="nav-item nav-link" href="#three">菜单3</a>
                </div>
            </div>
        </nav>
        <div data-spy="scroll" data-target="#mynav" data-offset="80" style="height: 300px;overflow: scroll;">
            <h3 id="one">菜单1</h3>
            <p>11111111111111</p>
            <p>11111111111111</p>
            <p>11111111111111</p>
            <p>11111111111111</p>
            <p>11111111111111</p>
            <p>11111111111111</p>
            <p>11111111111111</p>
            <h3 id="two">菜单2</h3>
            <p>22222222222222</p>
            <p>22222222222222</p>
            <p>22222222222222</p>
            <p>22222222222222</p>
            <p>22222222222222</p>
            <p>22222222222222</p>
            <h3 id="three">菜单3</h3>
            <p>33333333333333</p>
            <p>33333333333333</p>
            <p>33333333333333</p>
            <p>33333333333333</p>
            <p>33333333333333</p>
            <p>33333333333333</p>
            <p>33333333333333</p>
        </div>

垂直导航栏滚动监听

• 设置nav标签属性class="nav nav-pills flex-column"
• 给滚动内容和导航条设置列宽
• 可通过设置浮动让导航条和滚动块水平显示
  练习：

        <nav id="mynav" class="navbar navbar-dark bg-dark col-3" style="float: left;height: 300px;" >
            <!--<span class="navbar-brand">LOGO</span>-->
            <div class="nav nav-pills flex-column" id="navbar">
                <div class="navbar-nav">
                    <a class="nav-item nav-link" href="#one">菜单1</a>
                    <a class="nav-item nav-link" href="#two">菜单2</a>
                    <a class="nav-item nav-link" href="#three">菜单3</a>
                </div>
            </div>
        </nav>
        <div class="col-8" data-spy="scroll" data-target="#mynav" data-offset="80" style="height: 300px;overflow: scroll;">
            <h3 id="one">菜单1</h3>
            <p>11111111111111</p>
            <p>11111111111111</p>
            <p>11111111111111</p>
            <p>11111111111111</p>
            <p>11111111111111</p>
            <p>11111111111111</p>
            <p>11111111111111</p>
            <h3 id="two">菜单2</h3>
            <p>22222222222222</p>
            <p>22222222222222</p>
            <p>22222222222222</p>
            <p>22222222222222</p>
            <p>22222222222222</p>
            <p>22222222222222</p>
            <h3 id="three">菜单3</h3>
            <p>33333333333333</p>
            <p>33333333333333</p>
            <p>33333333333333</p>
            <p>33333333333333</p>
            <p>33333333333333</p>
            <p>33333333333333</p>
            <p>33333333333333</p>
        </div>