知识要点
实现原理:
1. 点击楼层跳相应楼层, 用的是锚点定位
电梯:<a href="#item2">2F 个护家清 </a></li>
列表 title:<div class="floor-title" id="item2"></div>
这个没什么好说的
2. 当点击楼层跳到相应楼层时, 该楼层高亮显示
我们的脚本主要就是实现这个功能.
原理获取浏览器导航条下拉的距离与各个楼层相对于文档顶部下拉的距离进行校验.
这里需要用到的方法事件:
- window.onscroll=function(){ } // 浏览器滚动监听事件执行函数
- .scrollTop // 获取滚动条下拉的高度, 大家可以用 console.log(top) 试一下就明白了
- .offsetTop // 获取元素距离文档顶部的距离
大体过程分析
首先获取滚动条下拉的高度, 以及存储一些会用到的变量
html 代码
- // 获取滚动条下拉的高度
- var top=document.documentElement.scrollTop||document.body.scrollTop;
- //console.log(top)
- // 所有楼层
- var items=document.getElementById("wrap").getElementsByClassName("floor-title");
- //a 标签父级
- var elev=document.getElementById("elev");
遍历所有楼层, 获取每个楼层距离文档顶部的距离, 如果滚动条的高度大于楼层的高度, 就把楼层的 ID 赋给 thisID,
每个楼层都比较一次, 直到不满足条件退出循环.
html 代码
- // 创建空变量下面存储当前楼层的 ID
- var thisID="";
- // 遍历所有楼层
- for(var i=0;i<items.length;i++){
- // 获取每个楼层距离文档顶部的距离
- var itemTop=items[i].offsetTop;
- //console.log(itemTop)
- // 如果滚动条的高度大于楼层的高度, 就把楼层的 ID 赋给 thisID
- // 每个楼层都比较一次, 直到不满足条件退出循环
- if(top>itemTop-100){// 减去 100 是为了用户体验, 自己测试下就懂了
- thisID=items[i].id;
- }else{
- break;
- }
- }
最后就是给当前楼层添加高亮样式, 其他的删除样式.
因为用的是原生 js, 没有 jquery 强大的选择器所以还要用一个循环遍历获取 href 值是当前楼层的 ID,
这里需要注意的是, 在 js 里 .href 获取的是个完整的链接, 所以要用 split() 方法分割为数组, 数组的最后一位就是 ID 了
html 代码
- // 所有 a 标签
- var alinks=elev.getElementsByTagName("a");
- if(thisID){
- for(var j=0;j<alinks.length;j++){
- // 因为获取的是一个完整链接所以要切割两半
- var _href=alinks[j].href.split("#");
- // 对数组最后一位和当前高度楼层的 id 进行校验
- if(_href[_href.length-1]!=thisID){
- alinks[j].className="";
- }else{
- addClass(alinks[j],"current")
- }
- }
- }
完整代码
注: 图片链接自己替换下, 再多复制些商品列表让浏览器足以满屏
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>demo</title>
- <style>
- body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
- h1,h2,h3,h4,h5,h6{font-size:100%;}
- address,cite,dfn,em,var{font-style:normal;}
- code,kbd,pre,samp{font-family:courier new,courier,monospace;}
- ul,ol{list-style:none;}
- a{text-decoration:none;}
- a:hover{text-decoration:none;}
- sup{vertical-align:text-top;}
- sub{vertical-align:text-bottom;}
- legend{color:#000;}
- fieldset,img{border:0;}
- button,input,select,textarea{font-size:100%;}
- table{border-collapse:collapse;border-spacing:0;}
- .clear{clear: both;float: none;height: 0;overflow: hidden;}
- body{background: #9B1BC5;}
- @font-face {
- font-family: 'iconfont'; /* project id 196174 */
- src: url('https://at.alicdn.com/t/font_9dwvwg9edp0q9f6r.eot');
- src: url('https://at.alicdn.com/t/font_9dwvwg9edp0q9f6r.eot?#iefix') format('embedded-opentype'),
- url('https://at.alicdn.com/t/font_9dwvwg9edp0q9f6r.woff') format('woff'),
- url('https://at.alicdn.com/t/font_9dwvwg9edp0q9f6r.ttf') format('truetype'),
- url('https://at.alicdn.com/t/font_9dwvwg9edp0q9f6r.svg#iconfont') format('svg');
- }
- .cart{
- font-family:"iconfont" !important;
- font-size:36px;font-style:normal;
- -webkit-font-smoothing: antialiased;
- -webkit-text-stroke-width: 0.2px;
- -moz-osx-font-smoothing: grayscale;
- cursor: pointer;
- color: #dd2727;
- height: 36px;
- width: 36px;
- padding: 0;
- line-height: 1;
- position: absolute;
- right: 0;
- bottom: 0;
- }
- .floor-title{width: 990px; margin: 0 auto; overflow: hidden;}
- .floor-text{width:990px; height: 80px; margin: 10px auto 0; font-size: 100%;}
- .content{width: 990px; margin: 0 auto; overflow: hidden;}
- .list0{font-size: 0; margin: 0 -10px -10px 0;}
- .item{display: inline-block; vertical-align: top; width: 190px; margin:0 10px 10px 0; background: #fff; position: relative; line-height: 1.2;}
- .item a{display: block;}
- .item-main{padding: 9px; position: relative;}
- .item-title{font: 14px/1.3 tahoma,arial,"\5b8b\4f53"; color: #313D44; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow: hidden; margin-bottom: 3px;}
- .item-desc{font: 12px/1.2 tahoma,arial,"\5b8b\4f53"; color: #dd2727; margin-bottom: 5px;}
- .item-imp{font: 12px/1.2 tahoma,arial,"\5b8b\4f53"; margin-top: 9px; padding-right: 35px; position: relative;}
- .item-sales{color: #666;}
- .promotion-price{font-size: 18px; color: #dd2727; font-weight: 700; font-family: Helvetica; line-height: 1.1; display: inline-block;}
- .promotion-price:first-letter {font-size: 14px; font-weight: 400; margin-right: 1px;}
- .elevator{position: fixed; left: 50%; margin-left: 505px; bottom: 60px; width: 100px; font: 12px/1.5 "Microsoft Yahei",tahoma,arial;}
- .elevator ul{background: #B50100;}
- .elevator ul li a{height: 25px; line-height: 25px; color: #fff; display: block; text-align: center;}
- .elevator ul li a:hover,
- .elevator ul li a.current{background: #800100;}
- </style>
- </head>
- <body>
- <div class="elevator" id="elev">
- <ul>
- <li><a href="#item1" class="current">1F 休闲食品 </a></li>
- <li><a href="#item2">2F 个护家清 </a></li>
- <li><a href="#item3">3F 粮油干货 </a></li>
- <li><a href="#item4">4F 母婴用品 </a></li>
- <li><a href="#item5">5F 进口食品 </a></li>
- <li><a href="#item6">6F 纸品日百 </a></li>
- </ul>
- </div>
- <div id="wrap">
- <div class="floor-title" id="item1"><h3 class="floor-text"><img src="images/1f.png"></h3></div>
- <div class="content">
- <div class="list0">
- <div class="item">
- <a href="#">
- <div class="img-wrap"><img src="images/pic.jpg"></div>
- <div class="item-main">
- <div class="item-info">
- <div class="item-title">Walch / 威露士清新青柠水润保湿洁净健康沐浴露 600mlssssssssssss</div>
- <div class="item-desc"> 满 188 减 100</div>
- </div>
- <div class="item-imp">
- <div class="imp-main">
- <div class="item-sales"> 月销 25170 件 </div>
- <div class="item-price"><b class="promotion-price">¥29.9</b></div>
- </div>
- <i class="cart"></i>
- </div>
- </div>
- </a>
- </div>
- </div>
- </div>
- <div class="floor-title" id="item2"><h3 class="floor-text"><img src="images/2f.png"></h3></div>
- <div class="content">
- <div class="list0">
- <div class="item">
- <a href="#">
- <div class="img-wrap"><img src="images/pic.jpg"></div>
- <div class="item-main">
- <div class="item-info">
- <div class="item-title">Walch / 威露士清新青柠水润保湿洁净健康沐浴露 600mlssssssssssss</div>
- <div class="item-desc"> 满 188 减 100</div>
- </div>
- <div class="item-imp">
- <div class="imp-main">
- <div class="item-sales"> 月销 25170 件 </div>
- <div class="item-price"><b class="promotion-price">¥29.9</b></div>
- </div>
- <i class="cart"></i>
- </div>
- </div>
- </a>
- </div>
- </div>
- </div>
- <div class="floor-title" id="item3"><h3 class="floor-text"><img src="images/3f.png"></h3></div>
- <div class="content">
- <div class="list0">
- <div class="item">
- <a href="#">
- <div class="img-wrap"><img src="images/pic.jpg"></div>
- <div class="item-main">
- <div class="item-info">
- <div class="item-title">Walch / 威露士清新青柠水润保湿洁净健康沐浴露 600mlssssssssssss</div>
- <div class="item-desc"> 满 188 减 100</div>
- </div>
- <div class="item-imp">
- <div class="imp-main">
- <div class="item-sales"> 月销 25170 件 </div>
- <div class="item-price"><b class="promotion-price">¥29.9</b></div>
- </div>
- <i class="cart"></i>
- </div>
- </div>
- </a>
- </div>
- </div>
- </div>
- <div class="floor-title" id="item4"><h3 class="floor-text"><img src="images/4f.png"></h3></div>
- <div class="content">
- <div class="list0">
- <div class="item">
- <a href="#">
- <div class="img-wrap"><img src="images/pic.jpg"></div>
- <div class="item-main">
- <div class="item-info">
- <div class="item-title">Walch / 威露士清新青柠水润保湿洁净健康沐浴露 600mlssssssssssss</div>
- <div class="item-desc"> 满 188 减 100</div>
- </div>
- <div class="item-imp">
- <div class="imp-main">
- <div class="item-sales"> 月销 25170 件 </div>
- <div class="item-price"><b class="promotion-price">¥29.9</b></div>
- </div>
- <i class="cart"></i>
- </div>
- </div>
- </a>
- </div>
- </div>
- </div>
- <div class="floor-title" id="item5"><h3 class="floor-text"><img src="images/5f.png"></h3></div>
- <div class="content">
- <div class="list0">
- <div class="item">
- <a href="#">
- <div class="img-wrap"><img src="images/pic.jpg"></div>
- <div class="item-main">
- <div class="item-info">
- <div class="item-title">Walch / 威露士清新青柠水润保湿洁净健康沐浴露 600mlssssssssssss</div>
- <div class="item-desc"> 满 188 减 100</div>
- </div>
- <div class="item-imp">
- <div class="imp-main">
- <div class="item-sales"> 月销 25170 件 </div>
- <div class="item-price"><b class="promotion-price">¥29.9</b></div>
- </div>
- <i class="cart"></i>
- </div>
- </div>
- </a>
- </div>
- </div>
- </div>
- <div class="floor-title" id="item6"><h3 class="floor-text"><img src="images/6f.png"></h3></div>
- <div class="content">
- <div class="list0">
- <div class="item">
- <a href="#">
- <div class="img-wrap"><img src="images/pic.jpg"></div>
- <div class="item-main">
- <div class="item-info">
- <div class="item-title">Walch / 威露士清新青柠水润保湿洁净健康沐浴露 600mlssssssssssss</div>
- <div class="item-desc"> 满 188 减 100</div>
- </div>
- <div class="item-imp">
- <div class="imp-main">
- <div class="item-sales"> 月销 25170 件 </div>
- <div class="item-price"><b class="promotion-price">¥29.9</b></div>
- </div>
- <i class="cart"></i>
- </div>
- </div>
- </a>
- </div>
- </div>
- </div>
- </div>
- <script type="text/javascript">
- // 在页面加载完后立即执行多个函数完美方案.
- function addloadEvent(func){
- var oldonload=window.onload;
- if(typeof window.onload !="function"){
- window.onload=func;
- }
- else{
- window.onload=function(){
- if(oldonload){
- oldonload();
- }
- func();
- }
- }
- }
- addloadEvent(b);
- // 在页面加载完后立即执行多个函数完美方案 over.
- // 给元素在原来基础上添加一个 className
- function addClass(element,value){
- if(!element.className){
- element.className=value;
- }
- else{
- newClassName=element.className;
- newClassName+=" ";
- newClassName+=value;
- element.className=newClassName;
- }
- }
- function b(){
- window.onscroll=function(){
- // 获取滚动条下拉的高度
- var top=document.documentElement.scrollTop||document.body.scrollTop;
- //console.log(top)
- // 所有楼层
- var items=document.getElementById("wrap").getElementsByClassName("floor-title");
- //a 标签父级
- var elev=document.getElementById("elev");
- // 创建空变量下面存储当前楼层的 ID
- var thisID="";
- // 遍历所有楼层
- for(var i=0;i<items.length;i++){
- // 获取每个楼层距离文档顶部的距离
- var itemTop=items[i].offsetTop;
- //console.log(itemTop)
- // 如果滚动条的高度大于楼层的高度, 就把楼层的 ID 赋给 thisID
- // 每个楼层都比较一次, 直到不满足条件退出循环
- if(top>itemTop-100){// 减去 100 是为了用户体验, 自己测试下就懂了
- thisID=items[i].id;
- }else{
- break;
- }
- }
- // 所有 a 标签
- var alinks=elev.getElementsByTagName("a");
- if(thisID){
- for(var j=0;j<alinks.length;j++){
- // 因为获取的是一个完整链接所以要切割两半
- var _href=alinks[j].href.split("#");
- // 对数组最后一位和当前高度楼层的 id 进行校验
- if(_href[_href.length-1]!=thisID){
- alinks[j].className="";
- }else{
- addClass(alinks[j],"current")
- }
- }
- }
- }
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/36841/fc66ec547316f4aa118cd970e26240de.html