关于scroll
使用scroll可以动态得到元素的大小、滚动距离等。
element.scrollTop——返回被卷去的上侧距离，返回数值不带单位；
element.scrollLeft——返回卷去的左侧距离，返回数值不带单位；
element.scrollWidth——返回自身实际宽度，不含边框，不带单位；
element.scrollHeight——返回自身实际高度，不含边框，不带单位。
案例分析：
1.原先侧边栏是绝对定位；
2.当页面滚动到一定位置，侧边栏改为固定定位；
3.页面继续滚动，会让返回顶部显示出来。
4.需要用到页面滚动事件scroll，因为是页面滚动，所以事件源是document；
5.滚动到某个位置，就是判断页面被卷去的上部值；
6.页面被卷去的头部可以通过window.pageYOffset获得，如果被卷去的是左侧用window.pageXOffset；
7.注意，元素被卷去的头部是element.scrollTop。
效果：
代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 .slider-bar{
12 position: absolute;
13 left: 50%;
14 top: 300px;
15 margin-left: 250px;
16 width: 50px;
17 height: 130px;
18 background-color: rgb(203, 252, 184,0.4);
19 }
20 .w
21 {
22 width: 500px;
23 margin: 10px auto;
24 }
25 .header{
26 height: 100px;
27 background-color: rgb(147, 222, 252, 0.2);
28 }
29 .banner{
30 height: 400px;
31 background-color: rgba(253, 234, 147, 0.2);
32 }
33 .main{
34 height: 1000px;
35 background-color: rgba(248, 25, 237, 0.1);
36 }
37 span{
38 display: none;
39 font-size: 20px;
40 position: absolute;
41 bottom: 0;
42 }
43 </style>
44 </head>
45 <body>
46 <div class="slider-bar">
47 <span class="goBack">返回顶部</span>
48 </div>
49 <div class="header w">头部区域</div>
50 <div class="banner w">banner区域</div>
51 <div class="main w">主体部分</div>
52 <script>
53 // 1.获取元素
54 var sliderbar = document.querySelector('.slider-bar');
55 var banner = document.querySelector('.banner');
56 var bannerTop = banner.offsetTop; //写在外面 因为滚动的时候banner.offsetTop会改变
57 var sliderTop = sliderbar.offsetTop - bannerTop; //当我们侧边栏固定定位之后slider的top值应该变化的数值
58
59 var main = document.querySelector('.main');
60 var goBack = document.querySelector('.goBack');
61 var mainTop = main.offsetTop;
62 // 2.页面滚动事件 scroll
63 document.addEventListener('scroll',function(){
64 // 3.当滚动到banner位置 此时侧边栏改为固定定位
65 if(window.pageYOffset >= bannerTop){
66 sliderbar.style.position = 'fixed';
67 sliderbar.style.top = sliderTop + 'px';
68 }else{
69 sliderbar.style.position = 'absolute';
70 sliderbar.style.top = '300px';
71 }
72 //4.当滚动到main位置 显示“返回顶部”
73 if(window.pageYOffset >= mainTop){
74 goBack.style.display = 'block';
75 }else{
76 goBack.style.display = 'none';
77 }
78 })
79 </script>
80 </body>
81 </html>
注意：
需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：
１.声明了DTD，使用document.documentElement.scrollTop；
２.未声明DTD，使用document.body.scrollTop；
３.新方法window.pageYOffset和window.pageXOffset，IE９开始支持。
1 function getScroll(){
2 return{
3 left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
4 top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
5 };
6 }
7 // 使用的时候 getScroll().left