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

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

在本教程中，您將學(xué)習(xí)如何制作一個(gè)頁眉，當(dāng)頁面向下滾動時(shí)，該標(biāo)題保持在適當(dāng)?shù)奈恢茫?dāng)頁面滾動回頂部時(shí)，該標(biāo)題不顯示。

小部件設(shè)置

創(chuàng)建滾動標(biāo)題

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

創(chuàng)建一個(gè)Sticky Header

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

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

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

使Sticky Header默認(rèn)為隱藏

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

滾動頁面時(shí)顯示Sticky Header

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

在頁面滾動時(shí)隱藏滾動標(biāo)題

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

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

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

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

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

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

• 單擊確定關(guān)閉編輯文本對話框。

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

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

• 單擊確定關(guān)閉條件生成器對話框。

預(yù)覽互動

預(yù)覽頁面并向下滾動。頁眉到達(dá)頁面頂部后應(yīng)固定在原處。

頁面向上滾動時(shí)，再次顯示滾動標(biāo)題

添加第二個(gè)窗口滾動案例

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

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

顯示滾動標(biāo)題組

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

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

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

預(yù)覽頁面并向上和向下滾動。向下滾動足夠遠(yuǎn)時(shí)，頁眉應(yīng)保持在原位，然后在滾動回頁面頂部時(shí)，應(yīng)再次松開。

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