持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情
1. 尺寸
2.位置
位置主要有三个: offset(); position(); scrollTop0/scrollLeft()
2.1 offset() (以文档为标准的位置)
设置或者获取元素偏移
- offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
- 该方法有2个属性left、top。offset0.top 用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离。
- 可以设置元素的偏移offset({ top: 10, left: 30 });
2.2 position() （以有定位的父级位置为标准，若没有定位的父级则以文档为标准）
注意：此方法只能获取，不能设置偏移
2.3 scrollTop()
scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧
1. 不带动画的返回顶部
2. 带动画的返回顶部
3. 品优购的电梯导航案例
1.通过导航栏控制内容
电梯导航的制作
- 当我们滚动到今日推荐模块，就让电梯导航显示出来点击电梯导航页面可以滚动到相应内容区域
- 核心算法︰因为电梯导航模块和内容区模块——对应的
- 当我们点击电梯导航某个小模块，就可以拿到当前小模块的索引号
- 就可以把animate要移动的距离求出来︰当前索引号内容区模块它的offset().top
- 然后执行动画即可
第一次尝试，bug是只有我们滚动页面的时候导航栏才会出现，故刷新一次就会消失
解决方式：
2.通过内容控制导航栏
- 当我们点击电梯导航某个小li，当前小li添加current类，兄弟移除类名
- 当我们页面滚动到内容区域某个模块，左侧电梯导航，相对应的小li模块，也会添加current类，兄弟移除current类。
- 触发的事件是页面滚动，因此这个功能要写到页面衮动事件里面。
- 需要用到each，遍历内容区域大模块。each里面能拿到内容区域每一个模块元素和索引号
- 判断的条件:被卷去的头部大于等于内容区域里面每个模块的offset().top
