这篇文章给大家分享的是有关js如何实现电商侧边导航效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

成都创新互联公司从2013年成立，是专业互联网技术服务公司，拥有项目网站设计、网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元武定做网站,已为上家服务,为武定各地企业和个人服务,联系电话:18980820575

知识要点

实现原理：

1.点击楼层跳相应楼层，用的是锚点定位

电梯：2F 个护家清

列表title：

这个没什么好说的

2.当点击楼层跳到相应楼层时，该楼层高亮显示

我们的脚本主要就是实现这个功能。

原理获取浏览器导航条下拉的距离与各个楼层相对于文档顶部下拉的距离进行校验。

这里需要用到的方法事件：

window.onscroll=function(){ } //浏览器滚动监听事件执行函数
.scrollTop //获取滚动条下拉的高度，大家可以用 console.log(top) 试一下就明白了
.offsetTop //获取元素距离文档顶部的距离

大体过程分析

首先获取滚动条下拉的高度，以及存储一些会用到的变量

//获取滚动条下拉的高度
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，

每个楼层都比较一次，直到不满足条件退出循环。

//创建空变量下面存储当前楼层的ID
var thisID="";
//遍历所有楼层
for(var i=0;iitemTop-100){//减去100是为了用户体验，自己测试下就懂了
 thisID=items[i].id;
 }else{
 break;
 }  
}

最后就是给当前楼层添加高亮样式，其他的删除样式。

因为用的是原生js，没有jquery强大的选择器所以还要用一个循环遍历获取href值是当前楼层的ID，

这里需要注意的是，在js里 .href  获取的是个完整的链接，所以要用split()方法分割为数组，数组的最后一位就是ID了

//所有a标签
var alinks=elev.getElementsByTagName("a"); 
if(thisID){
 for(var j=0;j
完整代码
注：图片链接自己替换下，再多复制些商品列表让浏览器足以满屏






 

 
 

 
1F 休闲食品
 
2F 个护家清
 
3F 粮油干货
 
4F 母婴用品
 
5F 进口食品
 
6F 纸品日百