編輯導讀：本文跟大家分享，如何用Axure完成導航欄根據滾動條同步選中效果，作者從預覽圖，到所需原件，再到操作步驟都一一展開了分析，並對過程中需要注意的問題進行了介紹，希望對你有所啓發。
現在網頁使用滾動條展示信息的場景越來越多，但是信息條太長會讓用户感覺不知道滾動到什麼位置了，對網站架構不太清楚，也不能快速定位到自己需要看到的信息，由此引入滾動條與導航欄關聯同步的功能，比如京東商城PC端、天貓PC端等等。
去年我也整理過關於實現此功能的文章，但是現在覺得之前的實現方案不太方便快捷，今天我將引入熱區元件來實現導航欄與滾動條同步選中的功能。
效果如下：
熱區的用途非常靈活，使用示例：
- 使用熱區元件來區分一個圖片中的不同交互區域。在圖片的不同區域上添加熱區元件，這樣就可以給這些區域添加交互了；
- 如果錨點鏈接需要定位到一個沒有元件的位置，那麼熱區元件可以作為其定位目標。（比如高於元件的一個空白區域）
今天我要使用的是第二個功能，將熱區作為定位目標
02 元件的使用- 熱區：放在相應的位置，用户標識內容塊的起始位置；
- 矩形：用於放置內容塊信息；
- 動態面板：用户設置導航欄；
頁面使用的元件情況入下圖：
（1）設置導航欄動態面板為固定到瀏覽器；
（2）將所有導航菜單添加到同一個選項組；
（3）導航菜單均設置：“鼠標點擊”導航菜單事件，事件內容為：“滾動元件”到對應的熱區；
設置思路：
窗體滾動時，
當窗體.Y座標>=熱區1.Y時，選中內容1對應的導航菜單；
當窗體.Y>=熱區1.Y且窗體.Y<熱區2.Y時，選中內容2對應的導航菜單；
依此內推；
設置完成後的內容為下圖：
是不是很方便、快捷？
本文由 @戀 原創發佈於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議