原生js实现电商侧边导航效果

前端之家收集整理的这篇文章主要介绍了原生js实现电商侧边导航效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

知识要点

实现原理:

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

电梯:

列表title:

这个没什么好说的

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

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

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

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

大体过程分析

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

遍历所有楼层,获取每个楼层距离文档顶部的距离,如果滚动条的高度大于楼层的高度,就把楼层的ID赋给thisID,

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

itemTop-100){//减去100是为了用户体验,自己测试下就懂了 thisID=items[i].id; }else{ break; } }

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

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

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

完整代码

注:图片链接自己替换下,再多复制些商品列表让浏览器足以满屏

demo

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

猜你在找的JavaScript相关文章