Demos for practice

• 概述：进度条记录阅读进度。

• 

• 主要步骤：

  • 添加需要的DOM；
  • 给进度块设置fix->unfix的动态变化条件(文档与进度块的滚动位置关系)；
  • 根据滚动条和元素位置(文档与标题的滚动位置关系)，给进度条设置相应的类；
  • 根据滚动进度条滚动的长度(在进度区间的文档滚动百分比)；
  • 点击进度块时的跳转。

• 注意：

  • 当某元素在某一位置固定时，它的offset(-top就和文档的scrollTop相等；
  • 注意每一次条件改变时的跳动，以及状态变化的条件。可设置一定的“垫块(-shim)”过度；
  • 考虑开始、中间、结束这三个过程的状态变化。