主要內(nèi)容

在天貓APP中，窗口滾動到導(dǎo)航1時，導(dǎo)航1固定在瀏覽器的頂部，跟隨窗口滾動，滾動到導(dǎo)航2時，導(dǎo)航2固定在瀏覽器的頂部，跟隨窗口滾動，本課我們學(xué)習(xí)使用axure函數(shù)和頁面交互事件來實現(xiàn)這個效果。

交互效果

1.窗口滾動到導(dǎo)航1位置時，導(dǎo)航1固定在瀏覽器的頂部，跟隨窗口滾動。

2.窗口滾動到導(dǎo)航2位置時，導(dǎo)航2固定在瀏覽器的頂部，跟隨窗口滾動。

一、原型制作

步驟1：

導(dǎo)入天貓頻道首頁的圖片到編輯區(qū)，設(shè)置位置與大小，x:0，y:0，w:360，h:1570（因是范例，所以直接用圖片代替）

步驟2：

導(dǎo)入導(dǎo)航1到編輯區(qū)，設(shè)置位置與大?。簒:0，y:114，w:360，h:43（因是范例，所以直接用圖片代替），命名：導(dǎo)航1

步驟3：

導(dǎo)入導(dǎo)航2到編輯區(qū)，設(shè)置位置與大?。簒:0，y:512，w:360，h:44（因是范例，所以直接用圖片代替），命名：導(dǎo)航2

二、設(shè)置頁面“窗口滾動時”事件

步驟4：

用例1：雙擊頁面交互下的“窗口滾動時”事件

第一步：編輯條件，選擇“值”，點擊后面的“fx”打開編輯文字窗口，選擇窗口函數(shù)“Window.scrollY”，設(shè)置條件：[[Window.scrollY]]" ≥ "116"?

第二步：選擇“移動”

第四步：移動“導(dǎo)航1”到絕對位置，x:0,y:Window.scrollY

移動“導(dǎo)航2”到絕對位置，x:0,y:512

步驟5：

用例2：參考用例1，雙擊頁面交互下的“窗口滾動時”事件，打開用例編輯器

第一步：編輯條件：設(shè)置條件：[[Window.scrollY]]" ≥ "512"

第二步：選擇“移動”

第四步：移動“導(dǎo)航2”到絕對位置，x:0,y:Window.scrollY

移動“導(dǎo)航1”到絕對位置，x:0,y:114

選中用例2，選擇“切換IF/ELSE IF”

步驟6：生成原型，預(yù)覽效果