2022-07-04 05:59:39 来源 : 软件开发网
(相关资料图)
本文实例为大家分享了js实现淘宝固定侧边栏的具体代码，供大家参考，具体内容如下
1.实现效果：
当页面运行到banner区域时，右边侧边栏改为固定定位，当页面运行到主体区域时，右边侧边栏显示返回到顶部。
2.思路：
（1）给document加scroll事件。
（2）获取页面被卷去的部分用window.pageYOffset.
（3）不断判断页面滚动了多少。计算右边侧边栏应该待的位置。
3.代码：
pink老师用了固定定位fixed（固定定位是相对于窗口的距离），我做的还是用绝对定位（绝对定位是相对于父元素来说的，即document），都是可以实现的。
Document 头部区域 头部区域 尾部区域 <script> var lan = document.querySelector(".lan"); document.addEventListener("scroll", function() { console.log("jkjkkj"); var top = window.pageYOffset; if(top > 200) { // 改为固定定位。 var topp = 400-200 + top; lan.style.top = topp+"px"; if(top > 600) { lan.innerHTML = "返回顶部"; } else { lan.innerHTML = ""; } } else { lan.style.top = 400+"px"; lan.innerHTML = ""; } }) </script> 
关于我们 加入我们 广告服务 网站地图
All Rights Reserved, Copyright 2004-2020 www.830036.com
如有意见请与我们联系 邮箱：435 227 67@qq.com
营业执照公示信息