摘要:绑定滚动事件,并且获得滚动的距离用来绑定的事件可以使用取消,因为点击楼层的时候,会有附带的跑马灯效果。根据索引获取楼层顶部距离回调函数,因为取消了监听事件,所以在点击完之后,在次调用监听事件。
-
- 1
-
- 2
-
- 3
-
- 4
-
- 5
-
- 6
-
1
2
3
4
5
6
- //1. 获得每层楼距离页面顶部的距离,并将它们放入一个数组中。
- var floorArr = [];
- $(".floor").each(function(){
- let everyTop = $(this).offset().top; //每个div距离页面顶部的距离。
- floorArr.push(everyTop);
- })
-
- //2. 监听滚动条滚过的距离,根据距离去判断滚到了那一层楼。
- //2.1 绑定滚动事件,并且获得滚动的距离
- //用on来绑定的事件可以使用off取消,因为点击楼层的时候,会有附带的跑马灯效果。方便取消监听。
- $(window).on("scroll",scrollMove)
- function scrollMove(){
- //滚动条滚动的距离
- var scrollTop = $(window).scrollTop()+100;
- var index = 0;
- for(var i=0; i
- var now = floorArr[i]; //当前楼层距离顶部的距离
- var next = floorArr[i+1]; //下一楼层距离顶部的距离。
- if(scrollTop>=now && scrollTop
- index = i;
- }else if(scrollTop>=floorArr[floorArr.length-1]){
- index = floorArr.length-1;
- }
- }
-
- //3. 根据楼层索引,去改变楼层导航的样式
- $(".floorMenu li").eq(index).addClass("active").siblings("li").removeClass("active")
- }
- //4. 给楼层导航绑定点击事件。
- $(".floorMenu li").click(function(){
- //取消滚动监听
- $(window).off("scroll");
- $(this).addClass("active").siblings("li").removeClass("active");
- //获得点击li的索引。
- var idx = $(this).index();
- //根据索引获取楼层顶部距离
- var sTop = floorArr[idx];
- $(document.body).animate({
- scrollTop:sTop
- },500,function(){ //回调函数,因为取消了监听事件,所以在点击完之后,在次调用监听事件。
- $(window).on("scroll",scrollMove)
- })
-
- })
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/112282.html
摘要:绑定滚动事件,并且获得滚动的距离用来绑定的事件可以使用取消,因为点击楼层的时候,会有附带的跑马灯效果。根据索引获取楼层顶部距离回调函数,因为取消了监听事件,所以在点击完之后,在次调用监听事件。 showImg(https://segmentfault.com/img/bVRg2P?w=1366&h=672); *{ ...
摘要:绑定滚动事件,并且获得滚动的距离用来绑定的事件可以使用取消,因为点击楼层的时候,会有附带的跑马灯效果。根据索引获取楼层顶部距离回调函数,因为取消了监听事件,所以在点击完之后,在次调用监听事件。 showImg(https://segmentfault.com/img/bVRg2P?w=1366&h=672); *{ ...
摘要:物流卡片新版的京东和淘宝有一个交互感觉不错,待收货订单会有类似探探那样的卡片效果,滑动查看下一条物流的信息,近期部门说要做这个效果,于是我就写了一个,现在分享出来和大家交流一下。 物流卡片Demo 新版的京东和淘宝有一个交互感觉不错, 待收货订单会有类似探探那样的卡片效果, 滑动查看下一条物流的信息, 近期UI部门说要做这个效果, 于是我就写了一个Demo, 现在分享出来和大...
阅读 1798·2021-11-12 10:36
阅读 1691·2021-11-12 10:36
阅读 3527·2021-11-02 14:46
阅读 3967·2019-08-30 15:56
阅读 3803·2019-08-30 15:55
阅读 1554·2019-08-30 15:44
阅读 1118·2019-08-30 14:00
阅读 2803·2019-08-29 18:41
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要