由于一些不可抗力，必须开始使用 Framerjs 这个难缠的小妖精了~为了辅助记忆 + 方便回头查阅，故将制作步骤记录下来。
第一步肯定不能做太难的，我就从最简单的模型开始尝试。制作一个滚动视图，内部插入三个当滚动到顶部时可以固定住的 titlebar。这里是完成的效果 http://share.framerjs.com/qo8gjsp4l9e2/
ps：有什么可以直接录屏成 GIF 的软件捏？找了半天没找到好用的...
开始码起来~创建一个状态栏
statusbar = new Layer
width: 750
height: 40
image: "images/status.png"
这句的意思是：创建一个新的图层，名字就叫做“statusbar”，它的宽度是 750px，高度是 40px，放一张图片在这个图层里，图片的位置是images文件夹下的status.png这个文件。
扯一句：framer 现在加入了 Autocode 功能，创建图层，修改属性这些变得非常简单，但这些本来就不难，正真难写的东西，却又偏偏无法 “autocode” 。这或许就是代码这东西的不可替代性吧。
好，继续。创建一个滚动视图。
scrollview = new ScrollComponent
y: 40
width: 750
height: 1294
backgroundColor: "fff"
scrollHorizontal: false
scrollview.contentInset = bottom:98
这句话的意思是：创建一个滚动视图，叫做scrollview ,这个视图距离屏幕顶部40px，宽度750px，高度1294px，背景颜色是白色，禁用掉水平方向的滚动。最后设置一个距离滚动视图底部98px的高度（为了不被tabbar挡住内容）
list = new Layer
image: "images/list.png"
width: 750
height: 2794
parent: scrollview.content
设置一个新的图层，叫做“list”，里面放上图片，高度750px，宽度2794px，设置父图层为“scrollview.content”（这里的content，是前面建立“ScrollComponent”时，带有的一个属性，每一个“ScrollComponent”都会有默认的“content”现在要做的就是把新建好的list视图嵌入到ScrollComponent 的 content视图下，这样list这个图层就可以滚动了~）
bannerA = new Layer
width: 712
height: 418
y: 234-40
x: 19
image: "images/banner1.png"
parent: list
上面这部分是想把“banner”单独布局出来，可能以后有空可以做下page的切换。大意同上。
最后放上tabber。完成布局。
tabber = new Layer
width: 750
height: 98
y: 1236
image: "images/tabber.png"
至此，滚动视图完成。
那如何制作 stickyheader 呢？官方有一个例子来教如何制作。不过流程稍显复杂（但也有优势）。我这里记录下一个别人写的 modules，使用起来也很方便。放上Github传送门 https://github.com/72/StickyHeaders-for-Framer，按照上面的方法来完成 stickyheader 的制作
下载好后，将上面写好的代码保存一下，将下载下来的文件夹里有一个“StickyHeaders.coffee”的文件，拷贝，黏贴在原型文件的“modules”文件夹下。
回到framer。
首先，需要在代码的顶上加上一句话
{StickyHeaders} = require "StickyHeaders"
这句就不是 coffeescript 的语句了，所以打的时候会发现没有代码提示了 =_=，这句话的大概意思是，加载 “StickyHeaders”这个 module，到变量“StickyHeaders”里
接着，放上三个需要固定的图层，我这里就是下面这三个。
healthtitle = new Layer
y: 642-40
width: 750
height: 112
image: "images/health.png"
parent: list
name: "StickyHeader"
focustitle = new Layer
y: 713*2-40
width: 750
height: 112
image: "images/focus.png"
parent: list
name: "StickyHeader"
happinesstitle = new Layer
y: 1105*2-40
width: 750
height: 112
image: "images/happiness.png"
parent: list
name: "StickyHeader"
这里的图层设置属性并没有和上面有什么不同，摆好位置插好图片后，唯一最关键的是记得要写“name”这个属性，这是要告诉程序，这个东西是我要固定的。还有注意这里的“stickyheader”是没有s的。只有这里是不加s的。
好了，离最终完成只差最后一步，
StickyHeaders.enableFor scrollview
当当当完成
