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

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

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

小部件設(shè)置

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

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

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

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

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

隱藏Sticky Header，直到頁(yè)面向下滾動(dòng)

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

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

滾動(dòng)頁(yè)面時(shí)顯示Sticky Header

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

在頁(yè)面滾動(dòng)時(shí)隱藏滾動(dòng)標(biāo)題

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

添加條件以檢查頁(yè)面的滾動(dòng)位置

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

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

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

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

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

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

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

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

預(yù)覽互動(dòng)

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

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

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

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

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

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

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

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

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

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

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