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{ 100%;height: 100%;} 9 #ul li{ 10 100%; 11 height: 100%; 12 text-align: center; 13 font-size: 30px; 14 /*background-color: red;*/ 15 color: #fff; 16 } 17 18 #ol{ 19 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>