1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 *{margin: 0;padding: 0;list-style: none;border:0;}
8 html, body, ul{width: 100%;height: 100%;}
9 #ul li{
10 width: 100%;
11 height: 100%;
12 text-align: center;
13 font-size: 30px;
14 /*background-color: red;*/
15 color: #fff;
16 }
17
18 #ol{
19 width: 80px;
20 background-color: #ccc;
21 position: fixed;
22 left: 50px;
23 top: 200px;
24 border: 1px solid #fff;
25 }
26
27 #ol li{
28 text-align: center;
29 line-height: 30px;
30 border-bottom: 1px solid #fff;
31 color: #fff;
32 cursor: pointer;
33 }
34
35 #ol li.current{
36 background-color: orangered;
37 }
38 </style>
39 </head>
40 <body>
41 <!--GPS-->
42 <ol id="ol">
43 <li class="current">第1层</li>
44 <li>第2层</li>
45 <li>第3层</li>
46 <li>第4层</li>
47 <li>第5层</li>
48 </ol>
49 <!--楼层-->
50 <ul id="ul">
51 <li>第1层内容</li>
52 <li>第2层内容</li>
53 <li>第3层内容</li>
54 <li>第4层内容</li>
55 <li>第5层内容</li>
56 </ul>
57
58 <script src="js/MyTool.js"></script>
59 <script>
60 window.addEventListener('load', function (ev) {
61 // 1. 获取标签
62 var ol = myTool.$('ol'), ul = myTool.$('ul');
63 var ulLis = ul.children;
64 var olLis = ol.children;
65
66 // 是否是点击产生的滚动
67 var isClick = false;
68
69 // 2. 上色
70 var colorArr = ['red', 'green', 'blue', 'purple', 'yellow'];
71 for (var i = 0; i < colorArr.length; i++) {
72 ulLis[i].style.backgroundColor = colorArr[i];
73 }
74
75 // 3. 监听GPS的点击
76 for (var j = 0; j < olLis.length; j++) {
77 var olLi = olLis[j];
78 (function (index) {
79 olLi.addEventListener('click', function () {
80 isClick = true;
81 for (var i = 0; i < olLis.length; i++) {
82 olLis[i].className = '';
83 }
84 this.className = 'current';
85 // document.documentElement.scrollTop = index * myTool.client().height;
86
87 myTool.buffer(document.documentElement, {'scrollTop': index * myTool.client().height}, function () {
88 isClick = false;
89 });
90 });
91 })(j)
92 }
93
94 // 4. 监听滚动
95 var roll = 0;
96 window.addEventListener('scroll', function (ev1) {
97 if(!isClick){
98 console.log('滚动了~~~~~~~~~~~~~');
99 // 4.1 获取头部滚动偏移的高度
100 roll = Math.ceil(Number(myTool.scroll().top));
101
102 // 4.2 遍历
103 for (var i = 0; i < ulLis.length; i++) {
104 // 4.3 判断
105 if(roll >= ulLis[i].offsetTop){
106 for (var j = 0; j < olLis.length; j++) {
107 olLis[j].className = '';
108 }
109 olLis[i].className = 'current';
110 }
111 }
112 }
113 })
114 });
115 </script>
116 </body>
117 </html>
