這篇文章，手把手教你如何用Axure做出：“任隨窗口滾動(dòng)，而導(dǎo)航部分卡片保持不動(dòng)，（即卡片始終懸停在指定的位置）”的效果。

如黃色框始終懸浮效果。

只需要一個(gè)事件：3個(gè)步驟。

第一步，做好導(dǎo)航菜單項(xiàng)部分，然后全選住，點(diǎn)擊右鍵”轉(zhuǎn)換為動(dòng)態(tài)面板”，并在右側(cè)的元件命名處，命名為title。

第二步：做好下面的主體內(nèi)容部分。（我用圖片占位符和矩形，隨意表示一下主體內(nèi)容部分）

第三步：設(shè)置窗口滾動(dòng)事件：

(1 ) 在頁(yè)面下的“頁(yè)面交互”選項(xiàng)卡下找到“窗口滾動(dòng)時(shí)”事件。

(2)然后按照下圖中的數(shù)字順序1->2->3->4->5點(diǎn)擊選擇設(shè)置：

（移動(dòng)—勾選動(dòng)態(tài)面板title—-選擇“絕對(duì)位置到”）

點(diǎn)擊第二個(gè)fx（y坐標(biāo)對(duì)應(yīng)），彈出“編輯值”窗口。

點(diǎn)擊“插入變量”，選擇 ?Window.scrollY。

（變量框內(nèi)容：刪除前面的0。最終效果是[[Window.scrollY]]）

（變量框內(nèi)容：刪除前面的0。最終效果是[[Window.scrollY]]）

確定事件。

預(yù)覽或生成一下，就能看到你想要的效果，任你頁(yè)面內(nèi)容有多長(zhǎng)，title部分內(nèi)容始終在上頭屹立不動(dòng)。

這樣的方式還可以做到任意位置，如在頁(yè)面旁邊放廣告，只要你設(shè)置好絕對(duì)位置的y坐標(biāo)軸，任你窗口如何滾動(dòng)，小廣告始終安靜地懸掛在那里。

事件：窗口滾動(dòng)時(shí) 移動(dòng) ?某個(gè)元件（內(nèi)容生成的動(dòng)態(tài)面板或小圖片）絕對(duì)位置到 y：fx ?。

設(shè)置 ?fx通常有以下幾種結(jié)果：

[[Window.scrollY]]

[[Window.scrollY+200]] （ 200為舉例，坐標(biāo)根據(jù)實(shí)際情況定）。

下面試試做個(gè)右側(cè)懸浮不動(dòng)的小廣告吧~~~

本文由 @beikehuahua?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。