起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識Axure教程：頂部導航跟隨頁面滾動
當頁面往下滾動時，導航跟隨頁面一起，點擊右側(cè)圖標可直接返回頂部。那這個效果是如何實現(xiàn)的呢，一起來文中看看~
如下圖：
頂部導航跟隨頁面滾動
線上效果圖，查看：頂部導航跟隨滾動
制作方法
1. 添加導航與頁面
按平時制作導航與頁面的方式制定，無需設置任何交互效果，但為了看到頁面效果，頁面建議添加長頁面，才可出現(xiàn)滾動。
2. 添加滾動圖標
添加滾動圖標，并設置為隱藏。
滾動圖標
針對圖標做交互操作，設置為搖擺，時間為500。
圖標交互
3. 添加熱區(qū)
添加一個熱區(qū)，并放置與菜單同坐標值位置。
熱區(qū)
4、頁面窗口滾動交互
在頁面添加窗口滾動交互，添加用例
窗口滾動交互
添加用例一，移動導航，設置為絕對位置，x值為[[Target.x]]，y值為[[Window.scrollY]]。
用例1
添加用例二，添加條件，設置值>10，顯示滾動圖標，動畫逐漸500s。
用例2
設置用例三，設置滾動圖標隱藏，動畫逐漸500s。
用例3
本文由 @?五百英里 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
評論
動態(tài)面板固定到瀏覽器頂部功能了解下 ??