Bootstrap插件（二）——滚动监听（scrollspy.js）
2017-09-12 23:32
671 查看
滚动监听就不细致的将他的方法属性或者事件之类的了，我们实现一个根据滑动位置动态改变导航选中选项和根据不同的导航菜单选中跳转到相应的位置的案例
先上效果图：
接下来是实现代码，代码的 实现和关键点在代码中有注释
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
先上效果图：
接下来是实现代码，代码的 实现和关键点在代码中有注释
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
42
<body style="margin: 60px" data-spy="scroll" data-target="#fixed-nav">
43
44
<!--固定顶部导航-->
45
<div id="fixed-nav" class="navbar navbar-default navbar-fixed-top">
46
<div class="container-fluid">
47
48
49
<!--头部品牌-->
50
<div class="navbar-header" style="margin-left: 60px">
51
<a class="navbar-brand" href="#">
52
<img src="img/img.jpg" width="30px" height="30px">
53
</a>
54
</div>
55
56
<!--导航主体内容-->
57
<div class="collapse navbar-collapse" id="navbar-collapse-1">
58
59
<ul class="nav navbar-nav">
60
61
<li role="presentation" class="active"><a href="#nav-one">导航一</a> </li>
62
63
<li role="presentation"><a href="#nav-two">导航二</a></li>
64
65
<li role="presentation"><a href="#nav-three">导航三</a></li>
66
</ul>
67
</div>
68
</div>
69
</div>
70
71
<div class="">
72
73
<div id="nav-one" class="panel panel-success">
74
<div class="panel-body">
75
导航一部分
76
</div>
77
</div>
78
<div class="jumbotron">
79
<div class="container">
80
81
<div class="col-sm-2 col-lg-2">
82
83
<a href="#" class="thumbnail">
84
<img src="img/pic1.jpeg" width="100%">
85
</a>
86
</div>
87
88
<div class="col-lg-10 col-sm-10">
89
<h2>跟着Sunnie走霓虹】轻触美丽枫情——一个人的轻井泽</h2>
90
<p>窒息于东京的浮华，在微信求代购的纷纷扰扰中血拼了一天后终于萌生了逃离的念头。
91
只想背起相机踏上一场属于我的轻旅行，欣赏我的风景，记录我的小确幸。</p>
92
<p><a class="btn btn-info" role="button" href="#">了解详情</a> </p>
93
</div>
94
</div>
95
96
</div>
97
98
<div class="jumbotron">
99
<div class="container">
100
101
<div class="col-sm-2 col-lg-2">
102
103
<a href="#" class="thumbnail">
104
<img src="img/lasa.png" width="100%">
105
</a>
106
</div>
107
108
<div class="col-lg-10 col-sm-10">
109
<h2>东京&镰仓——我们的青春纪念册</h2>
110
<p>这是暖君第一次写游记，以前每次出行的时候总会参考大家各式各样的游记来做攻略，但始终懒于提笔自己来写。
111
随着年龄的增长，记性越来越差，觉得是时候来用这样的方式来纪念每次出行的回忆。同时也希望能通过游记来分享一些
112
有用的Tips给各位蜂友！废话不多，先来几组预告。</p>
113
<p><a class="btn btn-info" role="button" href="#">了解详情</a> </p>
114
</div>
115
</div>
116
117
</div>
118
119
<div id="nav-two" class="panel panel-success">
120
<div class="panel-body">
121
导航二部分
122
</div>
123
</div>
124
<div class="jumbotron">
125
<div class="container">
126
127
<div class="col-sm-2 col-lg-2">
128
129
<a href="#" class="thumbnail">
130
<img src="img/jiuzhaigou.png" width="100%">
131
</a>
132
</div>
133
134
<div class="col-lg-10 col-sm-10">
135
<h2>一生要来三次的呼伦贝尔，看当地人怎么玩</h2>
136
<p>有人曾说，所有人灵魂的故乡都在一个共同的地方，那就是一望无际的草原！当你来了呼伦贝尔，你会发现：原来真的有
137
一片净土被人们遗忘；其实，这世界无所谓远方，每一个你的远方，都是他人的故乡，我希望用一次旅行，让呼伦贝尔，
138
成为每个人心中，不忘的远方。</p>
139
<p><a class="btn btn-info" role="button" href="#">了解详情</a> </p>
140
</div>
141
</div>
142
143
</div>
144
145
<div class="jumbotron">
146
<div class="container">
147
148
<div class="col-sm-2 col-lg-2">
149
150
<a href="#" class="thumbnail">
151
<img src="img/pic2.jpeg" width="100%">
152
</a>
153
</div>
154
155
<div class="col-lg-10 col-sm-10">
156
<h2>来成都住哪儿好？推荐这些精品酒店和人情味儿民宿</h2>
157
<p>成都是一个神奇的地方，温暖湿润的气候滋养出慵懒的性格。成都人爱享受那是天生的，茶馆、麻将馆、农家乐林立。但成都
158
偏偏又是个特别容易接纳北上广甚至海外风尚的乐活之城，诸多特色的精品酒店和民宿客栈在这里找到了生长的土壤。</p>
159
<p><a class="btn btn-info" role="button" href="#">了解详情</a> </p>
160
</div>
161
</div>
162
163
</div>
164
<div id="nav-three" class="panel panel-success">
165
<div class="panel-body">
166
导航三部分
167
</div>
168
</div>
169
<div class="jumbotron">
170
<div class="container">
171
172
<div class="col-sm-2 col-lg-2">
173
174
<a href="#" class="thumbnail">
175
<img src="img/wuzhen.png" width="100%">
176
</a>
177
</div>
178
179
<div class="col-lg-10 col-sm-10">
180
<h2>乌镇</h2>
181
<p>在这里，没有需要舟车劳顿的景点，没有熙熙攘攘的游人群体，你只需要悠然的踩...</p>
182
<p><a class="btn btn-info" role="button" href="#">了解详情</a> </p>
183
</div>
184
</div>
185
186
</div>
187
<div class="jumbotron">
188
<div class="container">
189
190
<div class="col-sm-2 col-lg-2">
191
192
<a href="#" class="thumbnail">
193
<img src="img/saba.jpeg" width="100%">
194
</a>
195
</div>
196
197
<div class="col-lg-10 col-sm-10">
198
<h2>沙巴</h2>
199
<p>
200
世界顶级潜水胜地之一 拥有景致优美的沙滩、珊瑚群围绕的小岛、峥嵘的山峦和...
201
</p>
202
<p><a class="btn btn-info" role="button" href="#">了解详情</a> </p>
203
</div>
204
</div>
205
206
</div>
207
</div>
208
</body>
209
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Bootstrap的js插件之滚动监听(scrollspy)
- Bootstrap滚动监听组件scrollspy.js使用方法详解
- 响应式前端框架Bootstrap系列（17）滚动监听（Scrollspy）插件
- bootstrap学习32---滚动监听scrollspy.js
- Bootstrap 下拉菜单和滚动监听（Scrollspy）插件
- Bootstrap 滚动监听插件Scrollspy 的选项
- Bootstrap 滚动监听插件Scrollspy 的方法
- Bootstrap教程JS插件滚动监听学习笔记分享
- Bootstrap 滚动监听插件Scrollspy 的事件
- bootstrap滚动监听插件Scrollspy横向和纵向实例对比
- Bootstrap滚动监听(Scrollspy)插件
- Bootstrap滚动监听（Scrollspy）插件详解
- Bootstrap 滚动监听（Scrollspy）插件
- BootStrap下拉菜单和滚动监听插件实现代码
- 全面解析Bootstrap中scrollspy（滚动监听）的使用方法
- Bootstrap3.0学习第二十轮(JavaScript插件——滚动监听)
- Bootstrap3.0学习第二十轮(JavaScript插件——滚动监听)
- Bootstrap 滚动监听(Scrollspy)
- Bootstrap 中 下拉菜单和滚动监听插件（十一）(持续更新中。。。)