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

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

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

效果如下：

01 熱區(qū)

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

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

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

02 元件的使用

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

頁面使用的元件情況入下圖：

03 交互設(shè)置

1. 導(dǎo)航欄

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

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

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

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

設(shè)置思路：

窗體滾動時(shí)，

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

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

…

依此內(nèi)推；

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

是不是很方便、快捷？

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

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