js如何实现淘宝固定侧边栏
导读：本文共1283.5字符，通常情况下阅读需要4分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 1.实现效果：当页面运行到banner区域时，右边侧边栏改为固定定位，当页面运行到主体区域时，右边侧边栏显示返回到顶部。2.思路：（1）给document加scroll事件。（2）获取页面被卷去的部分用window.pageYOffset.（3）不断判断页面滚动了多少。计算右边侧边栏应该待的位置。3.代码：pink老师用了固定定位fixed（固定定位是相对于窗口... ...
音频解说
1.实现效果：
当页面运行到banner区域时，右边侧边栏改为固定定位，当页面运行到主体区域时，右边侧边栏显示返回到顶部。
2.思路：
（1）给document加scroll事件。
（2）获取页面被卷去的部分用window.pageYOffset.
（3）不断判断页面滚动了多少。计算右边侧边栏应该待的位置。
3.代码：
pink老师用了固定定位fixed（固定定位是相对于窗口的距离），我做的还是用绝对定位（绝对定位是相对于父元素来说的，即document），都是可以实现的。
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><style>.top{width:80%;height:200px;background-color:pink;}.banner{width:80%;height:400px;background-color:aquamarine;}.main{width:80%;height:800px;background-color:red;}.foot{width:80%;height:400px;background-color:blanchedalmond;}.lan{position:absolute;right:10%;top:400px;width:80px;height:80px;background-color:cadetblue;}</style></head><body><divclass="top">头部区域</div><divclass="banner">banner区域</div><divclass="main">头部区域</div><divclass="foot">尾部区域</div><divclass="lan"></div><script>varlan=document.querySelector('.lan');document.addEventListener('scroll',function(){console.log('jkjkkj');vartop=window.pageYOffset;if(top>200){//改为固定定位。vartopp=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></body></html> </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
js如何实现淘宝固定侧边栏的详细内容，希望对您有所帮助，信息来源于网络。