本文內容適合初級Axure同學學習，Axure高手有更快捷的方法可達此效果歡迎評論留言，一起交流學習~
背景
相信大家在工作中遇到這樣的一個難題，絞盡腦汁，嘗試N種方法，還是沒有做出很流暢的懸浮效果。
曾經作者也遇到這樣難題，今天我將帶領大家一起學習，一起解決這個難題。
這是一個什么難題？
請查看下圖：
網站頭部，整站導航；頁面下滑時提起，懸浮置頂效果很好做；把網站頭部，整站導航放在動態模板外面或者將網站頭部，整站導航放在動態面板里面，設置固定到瀏覽器中居中靠上即可。
但是頁面下滑時，如果需要將頻道導航提起，懸浮至置頂效果該怎么做呢？
這樣的效果，現在網站中比比皆是，比如：36Kr、不凡商業、鈦媒體….等等，都用此交互效果展示頻道分類，便于用戶點擊，減少用戶學習成本。
效果該怎么實現？
步驟1：建模塊
我們新建3個板塊，分別起上名字頭部、廣告、頻道導航。
別光看著，來動手一起練習吧~
步驟2：起名字，后便找
選中板塊后，給每一個板塊名稱寫上。
步驟3：配置判斷條件
前提：鼠標不要選中任何板塊，如果你選中了頭部板塊，點擊下背景即可取消板塊選中。
①右側點擊窗口滾動時。
②點擊添加條件，進入條件配置頁面。
③選擇值。
④點擊fx>然后點擊插入變量或函數,>最后鼠標往下滑到窗口處，選擇Window.scrollY，確認。
⑤回到條件配置頁面，點擊+號旁邊的fX按鈕>然后點擊添加區域變數>選擇元件>選擇廣告，確認。
⑥回到條件配置頁面，選擇大于。
解釋：剛剛我們設置的是，當窗口滾動時，向下所滾動的距離大于廣告板塊高度的值條件。
步驟4：添加頻道導航提起案例
條件設定好后，點擊確認。
①找到移動并點擊它>然后選擇頻道導航>最后移動選框中選擇“到達”。
②以上操作完成后，點擊y處的fx>然后點擊插入變量或函數>最后選擇Window.scrollY，點擊確認。
解釋：
- 步驟3中，當窗口滾動時，向下所滾動的距離大于廣告板塊高度的值。
- 步驟4中，移動頻道導航，到達坐標X0，Y窗口滾動的起點，也就是頂部位置。
頻道導航提起，懸浮至置頂效果大功告成。
注意點：
- 頻道導航板塊別忘了置頂，不置頂提起懸浮時會被其它板塊蓋住。
- 練習時，請在頻道板塊下面增加點內容，隨便打點字，頁面展示區大于1屏才有向下滾動的效果。
頻道導航如何回到自己位置上？
剛剛完成了，當窗口滾動時，向下所滾動的距離大于廣告板塊高度的值。移動頻道導航，到頂部位置提起，浮動。
步驟1：新建案例名稱
可以將剛剛做好的案例復制，粘貼生成一份新的案例。也可重新編輯一份新的案例，為了節省時間我就復制，粘貼生成一份新的案例。
步驟2：編輯條件
按剛剛教您的步驟，進入條件設立板塊，別的都不要動，將大于改成小于即可。
解釋：剛剛我們設置的是：當窗口滾動時，向上向下所滾動的距離小于廣告板塊高度的值條件。
步驟3：頻道導航回城案例
①選中，頻道導航，記住Y軸坐標值。
②點開案例，將記住的Y軸坐標值填充到Y字段。
解釋：
- 案例2：當窗口滾動時，向上向下所滾動的距離小于廣告板塊高度的值時。
- 案例3：移動頻道導航，到達坐標X0，Y220的位置（自己起始位置）。
本文為@運營喵原創，運營喵專欄作者。
