31 元素滚动scroll系列

如果浏览器的高(或宽)度不足以显示整个页面时，会出现滚动条。当滚动条向下滚动时，页面上面会被隐藏掉的高度，就称为页面被卷去的头部。滚动条在滚动时触发 onscroll 事件。

功能需求：
- 原先侧边栏是绝对定位；
- 当页面滚动到一定位置时，侧边栏改为固定定位；
- 页面继续滚动，会让返回顶部显示出来；
核心思路：
- 需要用到页面滚动事件scroll，因为是页面滚动，所以事件源是document；
- 滚动到某个位置，就判断页面被卷去的上部值；
- 页面被卷去的头部：可以通过window.pageYOffset获得。如果是被卷去的左侧window.pageXOffset；
- 注意：元素被卷去的头部是element.scrollTop，如果是页面被卷去的头部则是window.pageYOffset。
页面被卷去的头部兼容性解决方案：
需要注意的是：页面被卷去的头部，有兼容性问题。因此，被卷去的头部通常有如下几种写法：
- 1.声明了DTD(!DOCTYPE html)，使用document.documentElement.scrollTop
- 2.未声明DTD，使用document.body.scrollTop
- 3.新方法window.pageYOffset和window.pageXOffset，IE9开始支持。
```
function getScroll(){
return {
  left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
  top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
使用的时候getScroll().left
```