我們在日常瀏覽網頁的時候，會發現上面的導航欄一直保持不動，而下面的內容會隨著滾動條的拖動而滑動，這個效果就是所謂的頂部吸附的效果，該怎么使用axure制作這個交互效果呢？下面我們就來看看詳細的教程。

1、首先新建一個空白頁面，在工作區域拖入本次要使用的元件元素，幾個矩形和幾個動態面板就可以了，如下圖所示。

2、然后我們對元件元素的樣式進行調整，并對里面的描述文字進行編寫，如下圖所示。

3、這一步需要對兩個動態面板的名稱進行設置，一個是上面的信息展示，一個是下面的導航信息，如下圖所示。命名沒有要求，想叫什么都可以。

4、打開動態面板，將兩個矩形復制到動態面板中，如下圖所示。

5、下面一步需要將兩個動態面板的固定到瀏覽器這一項進行設置，水平要固定到居中位置，垂直要在上，如下圖所示。

6、元件相關樣式及屬性設置完成后，開始對交互事件進行設置，這里需要給頁面加入交互事件，首先是第一個判斷條件，使用函數判斷窗口距離，如下圖所示。

7、然后設置第一個動態面板移動的絕對位置，如下圖所示。

8、然后設置第二動態面板隱藏，如下圖所示。

9、同上的方式，做第二個判斷條件，并對兩個動態面板的交互進行設置，如下圖所示。

10、最后一步，因為是窗口滾動的效果，所以需要再拖入一個矩形，并將矩形拉長一些，這樣瀏覽的時候窗口就有滾動條了，如下圖所示。

11、好了，工作準備完成，f5預覽一下效果，試著滾動鼠標，這些信息欄會消失，導航欄會吸附到最上面。

以上就是Axure頂部吸附交互效果的制作方法，希望大家喜歡，請繼續關注武林網。

相關推薦：

axure怎么給文字設置跑馬燈效果?

axure怎么設計菜單橫向隱藏與顯示的效果?

Axure RP8怎么設計倒計時獲取短信驗證碼效果?