您现在的位置是:网站首页> 编程资料编程资料

js实现淘宝固定侧边栏_javascript技巧_

2023-05-24 430人已围观

简介 js实现淘宝固定侧边栏_javascript技巧_

本文实例为大家分享了js实现淘宝固定侧边栏的具体代码,供大家参考,具体内容如下

1.实现效果:

当页面运行到banner区域时,右边侧边栏改为固定定位,当页面运行到主体区域时,右边侧边栏显示返回到顶部。

2.思路:

(1)给document加scroll事件。

(2)获取页面被卷去的部分用window.pageYOffset.

(3)不断判断页面滚动了多少。计算右边侧边栏应该待的位置。

3.代码:

pink老师用了固定定位fixed(固定定位是相对于窗口的距离),我做的还是用绝对定位(绝对定位是相对于父元素来说的,即document),都是可以实现的。

                    Document          
头部区域
       
头部区域
   
尾部区域
   
   

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

-六神源码网