由于一些不可抗力，必須開始使用 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
當當當完成
