原型設計工具Axure RP入門教程（七）：滾動激活的Sticky Header教程

---

Axure RP是一套專門為網(wǎng)站或應用程序所設計的快速原型設計工具， 可以讓應用網(wǎng)站策劃人員或網(wǎng)站功能界面設計師更加快速方便的建立Web AP和Website的線框圖、流程圖、原型和規(guī)格。

免費下載Axure RP 優(yōu)惠購買Axure RP

---

在本教程中，您將學習如何制作一個頁眉，當頁面向下滾動時，該標題保持在適當?shù)奈恢?，而當頁面滾動回頂部時，該標題不顯示。

小部件設置

創(chuàng)建滾動標題

• 畫一個新的RP文件，然后在畫布上打開Page 1。
• 將四個按鈕小部件拖到畫布上，將它們水平對齊并放置在（0,200）。
• 選擇這所有的四個按鈕小部件，然后單擊頂部工具欄中的分組以將它們分組。
• 將組命名為滾動標題。

創(chuàng)建一個Sticky Header

• 復制滾動頁眉組，并將其副本粘貼到（0,0）的畫布上。 將副本命名為Sticky Header內容。
• 右鍵單擊新組，然后在上下文菜單中選擇創(chuàng)建動態(tài)面板。
• 將新的動態(tài)面板命名為Sticky Header。
• 在樣式窗格中，單擊固定到瀏覽器。
• 在出現(xiàn)的對話框中，選中固定到瀏覽器窗口框。
• 如果頁面居中對齊（默認），則將水平針設置為居中。
• 如果頁面左對齊，則將水平針設置為左。
• 單擊確定關閉對話框。

頁面的內容足夠滾動
將熱點窗口小部件拖動到畫布上，并將其放置在（0,4000）。 這將使頁面在Web瀏覽器中可滾動，但是熱點窗口小部件將不可見。

隱藏Sticky Header，直到頁面向下滾動

使Sticky Header默認為隱藏

• 選擇粘性頁眉動態(tài)面板，然后單擊樣式窗格或樣式工具欄中的隱藏圖標。

滾動頁面時顯示Sticky Header

• 單擊畫布上的空白處以選擇頁面本身，然后在交互窗格中單擊新建交互。
• 在出現(xiàn)的列表中選擇滾動窗口事件，然后選擇顯示/隱藏操作。
• 在目標下拉列表中選擇Sticky Header動態(tài)面板。
• 保持顯示為選中狀態(tài)，然后單擊確定以保存操作。

在頁面滾動時隱藏滾動標題

• 將鼠標懸停在顯示/隱藏操作上，然后單擊出現(xiàn)的添加目標按鈕。
• 在目標下拉列表中選擇滾動標題組。
• 選擇隱藏，然后單擊確定以保存操作。

添加條件以檢查頁面的滾動位置

• 將鼠標懸停在交互窗格中滾動窗口標題上，然后單擊右側的啟用案例。在出現(xiàn)的條件構建器對話框中，將案例命名為向下滾動，然后單擊添加邏輯。

• 在出現(xiàn)的條件行中，在第一個下拉列表中選擇值。然后單擊第二個字段右側的fx圖標以打開編輯文本對話框。

• 在對話框頂部，單擊插入變量或函數(shù)。在出現(xiàn)的列表中，在窗口標題下選擇Window.scrollY。

• 對話框頂部的字段現(xiàn)在應顯示為：[[Window.scrollY]]。（此括號表達式表示頁面在Web瀏覽器中垂直滾動的像素數(shù)。）

• 單擊確定關閉編輯文本對話框。

• 在條件行的第三個字段中，選擇大于或等于。在右側的字段中，輸入200。

• 現(xiàn)在，條件構建器對話框底部的摘要應顯示為： if "[[Window.scrollY]]" is greater than or equals "200"。當頁面向下滾動200個像素時（即位于（0,200）的滾動標題組到達頁面頂部時），將滿足此條件。隱藏該組并同時顯示Sticky Header動態(tài)面板將使頁眉停止?jié)L動。

• 單擊確定關閉條件生成器對話框。

預覽互動

預覽頁面并向下滾動。頁眉到達頁面頂部后應固定在原處。

頁面向上滾動時，再次顯示滾動標題

添加第二個窗口滾動案例

返回Axure RP，將鼠標懸停在交互窗格中的滾動窗口標題上，然后單擊右側的添加案例。在出現(xiàn)的條件構建器對話框中，將案例命名為向上滾動，然后單擊確定而不添加任何邏輯。

注意：即使我們沒有為這種情況設置條件，它的條件為ELSE IF true。如果沒有通過第一種情況（當頁面向上滾動超過Y = 200時），則將觸發(fā)這種情況（也稱為默認情況）。

顯示滾動標題組

• 單擊窗口滾動塊底部的插入動作圖標，然后在出現(xiàn)的列表中選擇顯示/隱藏動作。
• 在目標下拉列表中選擇滾動標題組。
• 保持顯示為選中狀態(tài)，然后單擊確定以保存操作。

隱藏Sticky Header動態(tài)面板

• 將鼠標懸停在顯示/隱藏操作上，然后單擊出現(xiàn)的添加目標按鈕。
• 在目標下拉列表中選擇Sticky Header動態(tài)面板。
• 選擇隱藏，然后單擊確定以保存操作。

預覽互動

預覽頁面并向上和向下滾動。向下滾動足夠遠時，頁眉應保持在原位，然后在滾動回頁面頂部時，應再次松開。

---

關注慧聚IT微信公眾號???，了解產(chǎn)品的最新動態(tài)及最新資訊。