Axure制作頁面下拉時，頂部導(dǎo)航浮動并切換的交互效

Axure制作頁面下拉時，頂部導(dǎo)航浮動并切換的交互效果

何利用Axure做出頁面下拉時頂部導(dǎo)航浮動并切換的交互效果? 本文將分別講述移動端和PC端應(yīng)該如何做。

通常在一些大型的電商網(wǎng)站常見，首頁內(nèi)容下滑時，超過頂部導(dǎo)航高度時，頂部導(dǎo)航隨著下滑固定在瀏覽器頂部，并在樣式上有變化。

如下兩圖：

下滑前圖例

下滑后圖例

如何利用Axure做出這樣的交互效果? 本文將詳細講述移動端和PC端應(yīng)該如何做。

（PC端交互效果）

拉取一個動態(tài)面板，命名“頂部導(dǎo)航”，寬度1300PX,高度40PX；

設(shè)置屬性，100%瀏覽器寬度，背景顏色為灰色，并且固定至瀏覽器窗口，居中0.垂直固定上 0px；

隱藏該動態(tài)面板：

點擊該動態(tài)面板，在面板里面設(shè)置搜索框樣式；

返回首頁，設(shè)置條件：

窗口滾動時，滾動值>150px時，顯示“頂部導(dǎo)航”；

滾動值<150px時，隱藏“頂部導(dǎo)航”；

設(shè)置完成，刷新預(yù)覽，當頁面下拉150px時，可看到頂部導(dǎo)航隨頁面下拉固定至瀏覽器頂部且樣式變化，頁面下拉小于150px時，隱藏“頂部導(dǎo)航”顯示原導(dǎo)航；

移動端交互效果

移動端下拉時和PC稍有不同：

滑動前，注意【價格-銷量-品牌】標簽；

滑動后，banner圖片隨內(nèi)容下滑而被遮擋，【價格-銷量-品牌】標簽固定在導(dǎo)航欄下面；

如何實現(xiàn)呢？

需調(diào)用動態(tài)面板的專用函數(shù)scrollY；

將banner圖，【價格-銷量-品牌】標簽，以及下面的商品列表右鍵轉(zhuǎn)為動態(tài)面板，命名為“內(nèi)容”，正常全部高度要大于667px；

設(shè)置“內(nèi)容”動態(tài)面板的滾動條為自動顯示垂直滾動條；

將內(nèi)容動態(tài)面板高度縮為正常667PX高度；

進入“內(nèi)容”動態(tài)面板，將【價格-銷量-品牌】標簽右鍵轉(zhuǎn)為動態(tài)面板,命名為“頂部導(dǎo)航”；

回到“內(nèi)容”動態(tài)面板，添加用例，當滾動時，如果“內(nèi)容”動態(tài)面板的距離大于banner圖的高度，則移動“頂部導(dǎo)航”至（0.[[This.scrollY]]），如果“內(nèi)容”動態(tài)面板的滾動的距離小于banner高度，則“頂部導(dǎo)航”回到（0.110）110為“頂部導(dǎo)航”案例中原位置坐標。

設(shè)置完成，刷新預(yù)覽，當頁面下拉106px時，可看到頂部導(dǎo)航隨頁面下拉固定至導(dǎo)航欄下面，頁面下拉小于106px時，“頂部導(dǎo)航”回到原位置。

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

語：今天，本文作者和大家分享一下如何通過Axure實現(xiàn)網(wǎng)站Tab導(dǎo)航欄切換內(nèi)容頁和返回頂部交互，希望看后對你能有所幫助。

我們在使用知乎時，會發(fā)現(xiàn)向下滾動頁面，網(wǎng)站Tab導(dǎo)航欄會發(fā)生內(nèi)容切換；同時滾動超過一定距離，會出現(xiàn)回到頂部按鈕，點擊該按鈕，即可返回頁面頂部。

一、實現(xiàn)邏輯

向下滑動頁面，Tab導(dǎo)航欄由第一種狀態(tài)切換成第二種狀態(tài)；向上滑動頁面，Tab導(dǎo)航欄由第二種狀態(tài)切換成第一種狀態(tài)；
頁面滑動一定距離，顯示回到頂部按鈕，點擊回到頂部按鈕，頁面向上滾動回到頁面頂部。

二、頁面構(gòu)建元件準備

頂部欄兩種狀態(tài)及下滑頁面準備，我是通過截圖的方式準備的：

回到頂部按鈕、鼠標移入按鈕時所顯示的浮窗，將該組合命名為“回到頂部-總”：

三、添加交互事件

將頂部欄的兩種狀態(tài)分別放入動態(tài)面板中的狀態(tài)1與狀態(tài)2中，將動態(tài)面板命名為statusBar；

添加鼠標移入回到頂部按鈕顯示”回到頂部”氣泡：

添加向下、向上滑動頁面，頂部狀態(tài)欄切換；

其次，對窗口添加交互：

將“回到頂部-總”組合轉(zhuǎn)為動態(tài)面板，將該動態(tài)面板命名為“回到頂部-總panel”，固定動態(tài)面板顯示位置，并隱藏：

添加錨點元件，我們在此選擇熱區(qū)元件，因為熱區(qū)具有透明的特性，將其命名為TopLocation：

為“回到頂部”按鈕增加交互，鼠標移入顯示“回到頂部”氣泡，移除隱藏“回到頂部”氣泡；為“回到頂部”按鈕添加【單擊時】用例，設(shè)置動作【滾動到元件】，選擇TopLocation，垂直線性滾動500毫秒。

四、最終效果展示

五、補充知識

在上面交互的應(yīng)用中，我們會用到Window.scrollY函數(shù)，該函數(shù)為窗口函數(shù)；窗口函數(shù)一共包括以下四種：

Windows.width：獲取瀏覽器的當前寬度。
Windows.height：獲取瀏覽器的當前高度。
Windows.scrollX：獲取瀏覽器的水平滾動距離。
Windows.scrollY：獲取瀏覽器的垂直滾動距離。

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

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

直導(dǎo)航鼠標滑過出現(xiàn)垂直tab切換菜單展開效果

實現(xiàn)方法

css:

javascript：

在線咨詢

上一篇：JavaScript 面試題總結(jié)
下一篇：想學(xué)HTML該從何入手？web前端HTML終極指南

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商