整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
何利用Axure做出頁面下拉時頂部導航浮動并切換的交互效果? 本文將分別講述移動端和PC端應該如何做。
通常在一些大型的電商網站常見，首頁內容下滑時，超過頂部導航高度時，頂部導航隨著下滑固定在瀏覽器頂部，并在樣式上有變化。
如下兩圖：
下滑前圖例
下滑后圖例
如何利用Axure做出這樣的交互效果? 本文將詳細講述移動端和PC端應該如何做。
拉取一個動態面板，命名“頂部導航”，寬度1300PX,高度40PX；
設置屬性，100%瀏覽器寬度，背景顏色為灰色，并且固定至瀏覽器窗口，居中0.垂直固定上 0px；
隱藏該動態面板：
點擊該動態面板，在面板里面設置搜索框樣式；
返回首頁，設置條件：
窗口滾動時，滾動值>150px時，顯示“頂部導航”；
滾動值<150px時，隱藏“頂部導航”；
設置完成，刷新預覽，當頁面下拉150px時，可看到頂部導航隨頁面下拉固定至瀏覽器頂部且樣式變化，頁面下拉小于150px時，隱藏“頂部導航”顯示原導航；
移動端下拉時和PC稍有不同：
滑動前，注意【價格-銷量-品牌】標簽；
滑動后，banner圖片隨內容下滑而被遮擋，【價格-銷量-品牌】標簽固定在導航欄下面；
如何實現呢？
需調用動態面板的專用函數scrollY；
將banner圖，【價格-銷量-品牌】標簽，以及下面的商品列表右鍵轉為動態面板，命名為“內容”，正常全部高度要大于667px；
設置“內容”動態面板的滾動條為自動顯示垂直滾動條；
將內容動態面板高度縮為正常667PX高度；
進入“內容”動態面板，將【價格-銷量-品牌】標簽右鍵轉為動態面板,命名為“頂部導航”；
回到“內容”動態面板，添加用例，當滾動時，如果“內容”動態面板的距離大于banner圖的高度，則移動“頂部導航”至（0.[[This.scrollY]]），如果“內容”動態面板的滾動的距離小于banner高度，則“頂部導航”回到（0.110）110為“頂部導航”案例中原位置坐標。
設置完成，刷新預覽，當頁面下拉106px時，可看到頂部導航隨頁面下拉固定至導航欄下面，頁面下拉小于106px時，“頂部導航”回到原位置。
本文由 @胖子 原創發布于人人都是產品經理。未經許可，禁止轉載
語：今天，本文作者和大家分享一下如何通過Axure實現網站Tab導航欄切換內容頁和返回頂部交互，希望看后對你能有所幫助。
我們在使用知乎時，會發現向下滾動頁面，網站Tab導航欄會發生內容切換；同時滾動超過一定距離，會出現回到頂部按鈕，點擊該按鈕，即可返回頁面頂部。
頂部欄兩種狀態及下滑頁面準備，我是通過截圖的方式準備的：
回到頂部按鈕、鼠標移入按鈕時所顯示的浮窗，將該組合命名為“回到頂部-總”：
將頂部欄的兩種狀態分別放入動態面板中的狀態1與狀態2中，將動態面板命名為statusBar；
添加鼠標移入回到頂部按鈕顯示”回到頂部”氣泡：
添加向下、向上滑動頁面，頂部狀態欄切換；
其次，對窗口添加交互：
將“回到頂部-總”組合轉為動態面板，將該動態面板命名為“回到頂部-總panel”，固定動態面板顯示位置，并隱藏：
添加錨點元件，我們在此選擇熱區元件，因為熱區具有透明的特性，將其命名為TopLocation：
為“回到頂部”按鈕增加交互，鼠標移入顯示“回到頂部”氣泡，移除隱藏“回到頂部”氣泡；為“回到頂部”按鈕添加【單擊時】用例，設置動作【滾動到元件】，選擇TopLocation，垂直線性滾動500毫秒。
在上面交互的應用中，我們會用到Window.scrollY函數，該函數為窗口函數；窗口函數一共包括以下四種：
本文由 @小青 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協議
直導航鼠標滑過出現垂直tab切換菜單展開效果
實現方法
css:
javascript：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
