接下来就是比较困难的地方了:
下面得到的是遮罩层距预览图左侧和顶部的距离
maskX就是遮罩层在盒子中的left值,是怎么得来的呢,我来分析一下:
所以说要减去mask本身宽度和高度的一半...,我们使用client系列的相关属性来获取元素可视区的相关信息,通过client系列的相关属可以动态的获取该元素的边框大小,元素大小等....,我们使用scroll系列的相关属性可以动态的得到该元素的大小,滚动距离等....,但是当我们屏幕滚动到banner以上时,slider侧边栏就开始变成固定定位,当我们再往下滑到main部分时,slider里面的返回顶部会显示出来:
JS部分:
获取元素
看看效果是怎样的吧...:
不过好的方法总是有兼容性问题的:
三大系列总结: