起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure教程：頁面滾動時導航菜單始終可見
如何讓頁面的導航菜單在滾動時也可見呢？筆者以此為需求，講解了如何用Axure實現這個需求。
不知大家在某東官網買書瀏覽網頁的時候，有沒有發現這樣一種很有趣的現象：在書籍詳細頁面，頁面最上面一般是展示圖書相關圖片以及價格等信息，再往下就是圖書更詳細的信息。通常會有這4部分內容分別以Tab頁簽的形式展示，如商品介紹，規格包裝，售后保障以及商品評價。
每類的詳細信息都比較多，當我們想要了解更多信息的時候，我們就會向下滾動鼠標，正常來說滾動的距離超過頁簽原本高度的時候，這4個Tab頁簽就會消失不見的。但是我們會發現：這4個Tab頁簽始終可見并且始終的頁面的最上面。
來來來，我們先看一下效果：
大家想不想知道用Axure來怎么實現這種效果呢？下面就跟大家分享一下~
下面將從3個方面展開：
需求分析
通過上面的描述，相信大家比較了解需求了。話不多說，我們再來梳理一下需求，深入分析需求。
這個需求可以濃縮簡化為以下：頁面某些中菜單欄，在鼠標滾動的距離超過其原本高度的時候仍在界面顯示，并且顯示在頁面的最上面。
濃縮為Axure語言就是：鼠標滾動的距離超過某元件原本高度的時候仍在界面顯示，并且顯示在頁面的最上面。
看到這里，大家是不是會想到Axure中的動態面板呢？
對，沒錯，實現核心就是用到動態面板及函數。
Axure關鍵點分析
下面為Axure中的關鍵點分析：
4個Tab標簽用到的動態面板
頁面滾動的距離
這個案例中涉及頁面的滾動，頁面滾動時仍需要判斷頁面滾動的距離，當頁面滾動的距離大于等于動態面板的原本高度時，則將其移至頁面最上面即當前的頁高度，這里是絕對距離；否則不移動。
判斷頁面的高度，需要用到窗口高度函數， [[Window.scrollY]]；4個標簽動態面板的y坐標軸為400。
滿足這個條件，則將動態面板移至當前頁面高度的地方，注意是絕對距離。
效果展示
最后，我們來看看最終的效果，網址為?https://3djl4z.axshare.com?。
感謝小伙伴們的閱讀~
本文由 @翠baby 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
問個問題，在作者提供的示例當中，那個菜單假設有3個元素（1/2/3），有一個色塊在菜單中，頁面滾動到元素1對應的模塊，色塊移動至1；頁面滾動到元素2對應的模塊，色塊移動至2，依次類推。這個效果怎么做。我用了錨點，但是無法實現呀，求解。