滚动监听就不细致的将他的方法属性或者事件之类的了，我们实现一个根据滑动位置动态改变导航选中选项和根据不同的导航菜单选中跳转到相应的位置的案例
先上效果图：
接下来是实现代码，代码的 实现和关键点在代码中有注释
1
<!DOCTYPE html>
2
<html>
3
<head lang="en">
4
<meta charset="UTF-8">
5
<title>组件</title>
6
<!--引入bootstrap样式文件-->
7
<link href="css/bootstrap.min.css" rel="stylesheet">
8
<!--引入jq（必须在bootstrap.min.js文件之前）-->
9
<script type="application/javascript" src="js/jquery-3.2.0.js"></script>
10
<!--引入bootstrap js-->
11
<script type="application/javascript" src="js/bootstrap.min.js"></script>
12
13
<style type="text/css">
14
.jumbotron{
15
padding-top: 30px;
16
padding-bottom: 30px;
17
}
18
.panel{
19
background-color: #000;
20
color:white;
21
}
22
23
body{
24
position: relative;
25
}
26
27
</style>
28
</head>
29
30
<!--
31
滚动的监听大多数用来实现菜单位置与页面scroll内容的联动，将滚动位置与菜单项绑定
32
滚动到某一个位置显示选中菜单的某一项
33
34
实现页面与导航的联动的步骤：
35
1.设置监听的控件为相对定位position: relative; 这里设置的是body
36
2.设置data-spy="scroll" data-target="#fixed-nav" data-target指定导航控件
37
3.将导航的href与对应滑动到的位置的元素绑定起来 <a href="#nav-two">导航二</a> #nav-two就是我们点击这个导航后
38
跳转到的位置
39
-->
40
41
最低0.47元/天 解锁文章
8435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
