图片随滚动条距离变化而变化

首先，需要明确所要实现的效果

滚动条上推时页面恢复原样

当滚动条下拉的时候，顶部的样式出现变化

最开始的思路，是想着利用自定义滚动条的原理去做，通过页面与滚动条所成比例进行，高度的设置，但是效果并不理想。首先步骤复杂，其次卡顿效果明显。

解决方案

通过css3中的 transition 加 scale 缩放来实现

最开始，也是利用 transition 加 height 的方式，但是此种方式改变了布局，会导致ios某些手机不兼容，出现抖动和闪动的bug，在网上搜索无果。也是只好自己想办法解决。

另外，补充一个scale和zoom的区别

1. scale: 不会引起页面重绘，但是即使缩小和放大，其所占据的空间还是原来的空间
2. zoom:会引起页面的重绘，在某些场合下比scale好用，但是其只能等比例变化，且兼容性不是很好