微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

知识要点

实现原理:

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

电梯:

列表title:

这个没什么好说的

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

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

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

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

大体过程分析

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

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

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

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

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

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

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

完整代码

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

demo

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐