WEB APIS(共7天课程）Day6

三大系列中的-scroll系列
scrollLeft|scrollTop
水平|垂直方向滚动出去的距离
scrollWidth|scrollHeigh
内容的真实宽度|高度
滚动整个页面的时候， window.pageYOffset

仿淘宝侧边栏效果实现
1. 找到关心的元素对象
banner区域 元素对象
侧边栏的元素对象
主体部分 元素对象
2. 获取 banner区域以及主体部分距离顶部的距离
offsetTop
3. 给document 注册 scroll 滚动事件
通过 window.pageYOffset 来拿到滚动出去的距离
判断这个滚动出去的距离是否大于等于 banner元素距离顶部的距离
如果大于等于，让侧边栏修改定位模式为 fixed 同时修正一下top的偏移量
如果小于，让侧边栏修改定位模式为 absolute，修正一下top的偏移量
判断这个滚动出去的距离是否大于等于 main 元素距离顶部的距离
如果大于等于，需要让文本进行显示
如果小于，需要让文本进行隐藏

mouseenter 与 mouseover的区别
mouseenter 不会进行事件冒泡
mouseover 是会进行事件冒泡

动画的原理
利用定时器 setInterval，在定时器的函数中，先获取到当前盒子的位置，然后加上移动的距离，最后把这个值设置给当前元素的偏移就好

缓动动画
非匀速动画
公式来实现
var step= (目标位置- 当前盒子的位置)/10
把这个step + 盒子当前的位置，就是最后要设置给盒子的偏移量