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

---

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

免費下載Axure RP 優惠購買Axure RP

---

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

小部件設置

創建滾動標題

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

創建一個Sticky Header

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

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

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

使Sticky Header默認為隱藏

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

滾動頁面時顯示Sticky Header

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

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

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

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

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

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

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

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

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

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

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

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

預覽互動

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

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

添加第二個窗口滾動案例

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

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

顯示滾動標題組

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

隱藏Sticky Header動態面板

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

預覽互動

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

---

關注慧聚IT微信公眾號???，了解產品的最新動態及最新資訊。