我們?cè)谌粘g覽網(wǎng)頁(yè)的時(shí)候，會(huì)發(fā)現(xiàn)上面的導(dǎo)航欄一直保持不動(dòng)，而下面的內(nèi)容會(huì)隨著滾動(dòng)條的拖動(dòng)而滑動(dòng)，這個(gè)效果就是所謂的頂部吸附的效果，該怎么使用axure制作這個(gè)交互效果呢？下面我們就來(lái)看看詳細(xì)的教程。

軟件名稱(chēng)：原型設(shè)計(jì)工具Axure RP Pro 8.1特別版 中文漢化特別版(附漢化包+注冊(cè)碼+安裝教程)軟件大小：90.5MB更新時(shí)間：2018-05-24

1、首先新建一個(gè)空白頁(yè)面，在工作區(qū)域拖入本次要使用的元件元素，幾個(gè)矩形和幾個(gè)動(dòng)態(tài)面板就可以了，如下圖所示。

2、然后我們對(duì)元件元素的樣式進(jìn)行調(diào)整，并對(duì)里面的描述文字進(jìn)行編寫(xiě)，如下圖所示。

3、這一步需要對(duì)兩個(gè)動(dòng)態(tài)面板的名稱(chēng)進(jìn)行設(shè)置，一個(gè)是上面的信息展示，一個(gè)是下面的導(dǎo)航信息，如下圖所示。命名沒(méi)有要求，想叫什么都可以。

4、打開(kāi)動(dòng)態(tài)面板，將兩個(gè)矩形復(fù)制到動(dòng)態(tài)面板中，如下圖所示。

5、下面一步需要將兩個(gè)動(dòng)態(tài)面板的固定到瀏覽器這一項(xiàng)進(jìn)行設(shè)置，水平要固定到居中位置，垂直要在上，如下圖所示。

6、元件相關(guān)樣式及屬性設(shè)置完成后，開(kāi)始對(duì)交互事件進(jìn)行設(shè)置，這里需要給頁(yè)面加入交互事件，首先是第一個(gè)判斷條件，使用函數(shù)判斷窗口距離，如下圖所示。

7、然后設(shè)置第一個(gè)動(dòng)態(tài)面板移動(dòng)的絕對(duì)位置，如下圖所示。

8、然后設(shè)置第二動(dòng)態(tài)面板隱藏，如下圖所示。

9、同上的方式，做第二個(gè)判斷條件，并對(duì)兩個(gè)動(dòng)態(tài)面板的交互進(jìn)行設(shè)置，如下圖所示。

10、最后一步，因?yàn)槭谴翱跐L動(dòng)的效果，所以需要再拖入一個(gè)矩形，并將矩形拉長(zhǎng)一些，這樣瀏覽的時(shí)候窗口就有滾動(dòng)條了，如下圖所示。

11、好了，工作準(zhǔn)備完成，f5預(yù)覽一下效果，試著滾動(dòng)鼠標(biāo)，這些信息欄會(huì)消失，導(dǎo)航欄會(huì)吸附到最上面。