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>