原生js实现电商侧边导航效果-js教程-PHP中文网

知识要点

实现原理：

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

电梯：2F 个护家清

列表title：

这个没什么好说的

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

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

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

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

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

墨狐AI

5分钟生成万字小说，人人都是小说家！

下载

大体过程分析

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

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

完整代码
注：图片链接自己替换下，再多复制些商品列表让浏览器足以满屏




demo



 
 
 1F 休闲食品
 2F 个护家清
 3F 粮油干货
 4F 母婴用品
 5F 进口食品
 6F 纸品日百
 
 
 
 
 
 
 
 
 
 
 
 Walch/威露士清新青柠水润保湿洁净健康沐浴露600mlssssssssssss
 满188减100
 
 
 
  月销25170件
  ¥29.9
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 Walch/威露士清新青柠水润保湿洁净健康沐浴露600mlssssssssssss
 满188减100
 
 
 
  月销25170件
  ¥29.9
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 Walch/威露士清新青柠水润保湿洁净健康沐浴露600mlssssssssssss
 满188减100
 
 
 
  月销25170件
  ¥29.9
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 Walch/威露士清新青柠水润保湿洁净健康沐浴露600mlssssssssssss
 满188减100
 
 
 
  月销25170件
  ¥29.9
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 Walch/威露士清新青柠水润保湿洁净健康沐浴露600mlssssssssssss
 满188减100
 
 
 
  月销25170件
  ¥29.9
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 Walch/威露士清新青柠水润保湿洁净健康沐浴露600mlssssssssssss
 满188减100
 
 
 
  月销25170件
  ¥29.9
 
 
 
 
 
 
 
 
 
 


以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持PHP中文网！
更多原生js实现电商侧边导航效果相关文章请关注PHP中文网！