如何讓頁面的導航菜單在滾動時也可見呢？筆者以此為需求，講解了如何用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協議