侧边栏

 

 

仿淘宝固定右侧侧边栏

- 题目描述

把课上的仿淘宝固定右侧侧边栏写一遍

- 训练目标

能够独立完成仿淘宝固定右侧侧边栏案例

- 训练提示

1. 原先侧边栏是绝对定位

2. 当页面滚动到一定位置，侧边栏改为固定定位

3. 页面继续滚动，会让 返回顶部显示出来

 

1、返回顶部

- 题目描述

把课上的返回顶部写一遍

- 训练目标

能够会使用动画函数书写返回顶部案例

- 训练提示

1. 带有动画的返回顶部

2. 此时可以继续使用我们封装的动画函数

3. 只需要把所有的left 相关的值改为 跟 页面垂直滚动距离相关就可以了

4. 页面滚动了多少，可以通过 window.pageYOffset 得到

5. 最后是页面滚动，使用 window.scroll(x,y) 

 

2、返回顶部案例

- 题目描述

把课上的返回顶部案例写一遍

- 训练目标

能够明白pc端和移动端的代码是一样的,可以通用

- 训练提示

  1. 滚动某个地方显示

  2. 事件：scroll页面滚动事件  

  3. 如果被卷去的头部（window.pageYOffset ）大于某个数值

  4. 点击返回顶部