Javascript|Javascript元素滚动scoll系列（仿淘宝固定右侧侧边栏）和移动端区别 Javascript|js

效果：
1、原先侧边栏是绝对定位
2、当页面移动到一定位置，侧边栏改为固定定位
3、页面继续滚动，会让返回顶部显示出来
案例分析：1、需要用页面滚动事件scoll 因为页面滚动，所以事件源是document
2、滚动到某个位置，就是判断页面被卷上去的上部值
3、页面被卷上去的头部：可以通过window.pageYOffset 获得如果被卷去的是左侧 window.pageXOffset
4、注意，元素被卷去的头部是element.scrollTop 如果是页面被卷去是window.pageYOffset
HTML部分

文章图片

CSS部分

文章图片

JS部分
文章图片
1、获取元素得到ducument然后用window.pageYOffset 如果大于banner卷去的头部就是固定定位
2、获取banner以及定义bannerTop 在利用页面卷进去的头部减去banner元素卷进去的头部（sliderbar.pageYOffset-bannerTop）
3、得到的效果图有300px 的像素差跳转因为定位CSS时top为300px 所以应该获得sliderbar.offset-banner.offset 为滚动完之后的距离（消除了跳转）

文章图片

4、到主体部分，返回顶部显示出来。获得元素main boBack,之后如果window.pageYOffset（页面卷取的距离）>=maintop 就显示字体否则不显示。

移动端scroll不同的是555-561行相同，但是当地点击回到顶部时的click时，会有300ms的延时，原因是移动端屏幕双击会缩放（double tap to zoom)页面。 click延迟问题方案 1、禁止缩放功能。顶端写上 2、如果需要缩放，利用touch事件自己封装事件解决300ms延时。原理是（1）当手指触摸屏幕，记录当前触摸事件（2）手指离开屏幕，就用离开时间减去触摸时间（3）如果时间小于150s，并且没有滑动屏幕，我们就定义为点击

【Javascript|Javascript元素滚动scoll系列（仿淘宝固定右侧侧边栏）和移动端区别】