如何讓頁面的導航菜單在滾動時也可見呢？筆者以此為需求，講解了如何用Axure實現(xiàn)這個需求。

不知大家在某東官網(wǎng)買書瀏覽網(wǎng)頁的時候，有沒有發(fā)現(xiàn)這樣一種很有趣的現(xiàn)象：在書籍詳細頁面，頁面最上面一般是展示圖書相關圖片以及價格等信息，再往下就是圖書更詳細的信息。通常會有這4部分內(nèi)容分別以Tab頁簽的形式展示，如商品介紹，規(guī)格包裝，售后保障以及商品評價。

每類的詳細信息都比較多，當我們想要了解更多信息的時候，我們就會向下滾動鼠標，正常來說滾動的距離超過頁簽原本高度的時候，這4個Tab頁簽就會消失不見的。但是我們會發(fā)現(xiàn)：這4個Tab頁簽始終可見并且始終的頁面的最上面。

來來來，我們先看一下效果：

大家想不想知道用Axure來怎么實現(xiàn)這種效果呢？下面就跟大家分享一下~

下面將從3個方面展開：

需求分析

通過上面的描述，相信大家比較了解需求了。話不多說，我們再來梳理一下需求，深入分析需求。

這個需求可以濃縮簡化為以下：頁面某些中菜單欄，在鼠標滾動的距離超過其原本高度的時候仍在界面顯示，并且顯示在頁面的最上面。

濃縮為Axure語言就是：鼠標滾動的距離超過某元件原本高度的時候仍在界面顯示，并且顯示在頁面的最上面。

看到這里，大家是不是會想到Axure中的動態(tài)面板呢？

對，沒錯，實現(xiàn)核心就是用到動態(tài)面板及函數(shù)。

Axure關鍵點分析

下面為Axure中的關鍵點分析：

4個Tab標簽用到的動態(tài)面板

頁面滾動的距離

這個案例中涉及頁面的滾動，頁面滾動時仍需要判斷頁面滾動的距離，當頁面滾動的距離大于等于動態(tài)面板的原本高度時，則將其移至頁面最上面即當前的頁高度，這里是絕對距離；否則不移動。

判斷頁面的高度，需要用到窗口高度函數(shù)， [[Window.scrollY]]；4個標簽動態(tài)面板的y坐標軸為400。

滿足這個條件，則將動態(tài)面板移至當前頁面高度的地方，注意是絕對距離。

效果展示

最后，我們來看看最終的效果，網(wǎng)址為?https://3djl4z.axshare.com?。

感謝小伙伴們的閱讀~

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

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