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

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

去年我也整理過關于實現此功能的文章，但是現在覺得之前的實現方案不太方便快捷，今天我將引入熱區元件來實現導航欄與滾動條同步選中的功能。

效果如下：

01 熱區

熱區的用途非常靈活，使用示例：

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

今天我要使用的是第二個功能，將熱區作為定位目標

02 元件的使用

• 熱區：放在相應的位置，用戶標識內容塊的起始位置；
• 矩形：用于放置內容塊信息；
• 動態面板：用戶設置導航欄；

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

03 交互設置

1. 導航欄

（1）設置導航欄動態面板為固定到瀏覽器；

（2）將所有導航菜單添加到同一個選項組；

（3）導航菜單均設置：“鼠標點擊”導航菜單事件，事件內容為：“滾動元件”到對應的熱區；

2. 設置頁面“窗體滾動”事件

設置思路：

窗體滾動時，

當窗體.Y坐標>=熱區1.Y時，選中內容1對應的導航菜單；

當窗體.Y>=熱區1.Y且窗體.Y<熱區2.Y時，選中內容2對應的導航菜單；

…

依此內推；

設置完成后的內容為下圖：

是不是很方便、快捷？

本文由 @戀 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議