編輯導(dǎo)讀：本文跟大家分享，如何用Axure完成導(dǎo)航欄根據(jù)滾動(dòng)條同步選中效果，作者從預(yù)覽圖，到所需原件，再到操作步驟都一一展開(kāi)了分析，并對(duì)過(guò)程中需要注意的問(wèn)題進(jìn)行了介紹，希望對(duì)你有所啟發(fā)。

現(xiàn)在網(wǎng)頁(yè)使用滾動(dòng)條展示信息的場(chǎng)景越來(lái)越多，但是信息條太長(zhǎng)會(huì)讓用戶感覺(jué)不知道滾動(dòng)到什么位置了，對(duì)網(wǎng)站架構(gòu)不太清楚，也不能快速定位到自己需要看到的信息，由此引入滾動(dòng)條與導(dǎo)航欄關(guān)聯(lián)同步的功能，比如京東商城PC端、天貓PC端等等。

去年我也整理過(guò)關(guān)于實(shí)現(xiàn)此功能的文章，但是現(xiàn)在覺(jué)得之前的實(shí)現(xiàn)方案不太方便快捷，今天我將引入熱區(qū)元件來(lái)實(shí)現(xiàn)導(dǎo)航欄與滾動(dòng)條同步選中的功能。

效果如下：

01 熱區(qū)

熱區(qū)的用途非常靈活，使用示例：

• 使用熱區(qū)元件來(lái)區(qū)分一個(gè)圖片中的不同交互區(qū)域。在圖片的不同區(qū)域上添加熱區(qū)元件，這樣就可以給這些區(qū)域添加交互了；
• 如果錨點(diǎn)鏈接需要定位到一個(gè)沒(méi)有元件的位置，那么熱區(qū)元件可以作為其定位目標(biāo)。（比如高于元件的一個(gè)空白區(qū)域）

今天我要使用的是第二個(gè)功能，將熱區(qū)作為定位目標(biāo)

02 元件的使用

• 熱區(qū)：放在相應(yīng)的位置，用戶標(biāo)識(shí)內(nèi)容塊的起始位置；
• 矩形：用于放置內(nèi)容塊信息；
• 動(dòng)態(tài)面板：用戶設(shè)置導(dǎo)航欄；

頁(yè)面使用的元件情況入下圖：

03 交互設(shè)置

1. 導(dǎo)航欄

（1）設(shè)置導(dǎo)航欄動(dòng)態(tài)面板為固定到瀏覽器；

（2）將所有導(dǎo)航菜單添加到同一個(gè)選項(xiàng)組；

（3）導(dǎo)航菜單均設(shè)置：“鼠標(biāo)點(diǎn)擊”導(dǎo)航菜單事件，事件內(nèi)容為：“滾動(dòng)元件”到對(duì)應(yīng)的熱區(qū)；

2. 設(shè)置頁(yè)面“窗體滾動(dòng)”事件

設(shè)置思路：

窗體滾動(dòng)時(shí)，

當(dāng)窗體.Y坐標(biāo)>=熱區(qū)1.Y時(shí)，選中內(nèi)容1對(duì)應(yīng)的導(dǎo)航菜單；

當(dāng)窗體.Y>=熱區(qū)1.Y且窗體.Y<熱區(qū)2.Y時(shí)，選中內(nèi)容2對(duì)應(yīng)的導(dǎo)航菜單；

…

依此內(nèi)推；

設(shè)置完成后的內(nèi)容為下圖：

是不是很方便、快捷？

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

題圖來(lái)自Unsplash，基于CC0協(xié)議