起點(diǎn)課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識Axure：如何實(shí)現(xiàn)Banner導(dǎo)航懸浮頂部效果（PC端）？
本文內(nèi)容適合初級Axure同學(xué)學(xué)習(xí)，Axure高手有更快捷的方法可達(dá)此效果歡迎評論留言，一起交流學(xué)習(xí)~
背景
相信大家在工作中遇到這樣的一個難題，絞盡腦汁，嘗試N種方法，還是沒有做出很流暢的懸浮效果。
曾經(jīng)作者也遇到這樣難題，今天我將帶領(lǐng)大家一起學(xué)習(xí)，一起解決這個難題。
這是一個什么難題？
請查看下圖：
網(wǎng)站頭部，整站導(dǎo)航；頁面下滑時提起，懸浮置頂效果很好做；把網(wǎng)站頭部，整站導(dǎo)航放在動態(tài)模板外面或者將網(wǎng)站頭部，整站導(dǎo)航放在動態(tài)面板里面，設(shè)置固定到瀏覽器中居中靠上即可。
但是頁面下滑時，如果需要將頻道導(dǎo)航提起，懸浮至置頂效果該怎么做呢？
這樣的效果，現(xiàn)在網(wǎng)站中比比皆是，比如：36Kr、不凡商業(yè)、鈦媒體….等等，都用此交互效果展示頻道分類，便于用戶點(diǎn)擊，減少用戶學(xué)習(xí)成本。
效果該怎么實(shí)現(xiàn)？
步驟1：建模塊
我們新建3個板塊，分別起上名字頭部、廣告、頻道導(dǎo)航。
別光看著，來動手一起練習(xí)吧~
步驟2：起名字，后便找
選中板塊后，給每一個板塊名稱寫上。
步驟3：配置判斷條件
前提：鼠標(biāo)不要選中任何板塊，如果你選中了頭部板塊，點(diǎn)擊下背景即可取消板塊選中。
①右側(cè)點(diǎn)擊窗口滾動時。
②點(diǎn)擊添加條件，進(jìn)入條件配置頁面。
③選擇值。
④點(diǎn)擊fx>然后點(diǎn)擊插入變量或函數(shù),>最后鼠標(biāo)往下滑到窗口處，選擇Window.scrollY，確認(rèn)。
⑤回到條件配置頁面，點(diǎn)擊+號旁邊的fX按鈕>然后點(diǎn)擊添加區(qū)域變數(shù)>選擇元件>選擇廣告，確認(rèn)。
⑥回到條件配置頁面，選擇大于。
解釋：剛剛我們設(shè)置的是，當(dāng)窗口滾動時，向下所滾動的距離大于廣告板塊高度的值條件。
步驟4：添加頻道導(dǎo)航提起案例
條件設(shè)定好后，點(diǎn)擊確認(rèn)。
①找到移動并點(diǎn)擊它>然后選擇頻道導(dǎo)航>最后移動選框中選擇“到達(dá)”。
②以上操作完成后，點(diǎn)擊y處的fx>然后點(diǎn)擊插入變量或函數(shù)>最后選擇Window.scrollY，點(diǎn)擊確認(rèn)。
解釋：
- 步驟3中，當(dāng)窗口滾動時，向下所滾動的距離大于廣告板塊高度的值。
- 步驟4中，移動頻道導(dǎo)航，到達(dá)坐標(biāo)X0，Y窗口滾動的起點(diǎn)，也就是頂部位置。
頻道導(dǎo)航提起，懸浮至置頂效果大功告成。
注意點(diǎn)：
- 頻道導(dǎo)航板塊別忘了置頂，不置頂提起懸浮時會被其它板塊蓋住。
- 練習(xí)時，請?jiān)陬l道板塊下面增加點(diǎn)內(nèi)容，隨便打點(diǎn)字，頁面展示區(qū)大于1屏才有向下滾動的效果。
頻道導(dǎo)航如何回到自己位置上？
剛剛完成了，當(dāng)窗口滾動時，向下所滾動的距離大于廣告板塊高度的值。移動頻道導(dǎo)航，到頂部位置提起，浮動。
步驟1：新建案例名稱
可以將剛剛做好的案例復(fù)制，粘貼生成一份新的案例。也可重新編輯一份新的案例，為了節(jié)省時間我就復(fù)制，粘貼生成一份新的案例。
步驟2：編輯條件
按剛剛教您的步驟，進(jìn)入條件設(shè)立板塊，別的都不要動，將大于改成小于即可。
解釋：剛剛我們設(shè)置的是：當(dāng)窗口滾動時，向上向下所滾動的距離小于廣告板塊高度的值條件。
步驟3：頻道導(dǎo)航回城案例
①選中，頻道導(dǎo)航，記住Y軸坐標(biāo)值。
②點(diǎn)開案例，將記住的Y軸坐標(biāo)值填充到Y(jié)字段。
解釋：
- 案例2：當(dāng)窗口滾動時，向上向下所滾動的距離小于廣告板塊高度的值時。
- 案例3：移動頻道導(dǎo)航，到達(dá)坐標(biāo)X0，Y220的位置（自己起始位置）。
效果預(yù)覽：https://m45sa3.axshare.com
以上是作者的全部講解，有點(diǎn)啰嗦，希望能幫助到你們。
如有疑問歡迎留言，一起探討，學(xué)習(xí)。
本文由 @閃電貂1990 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Pexels，基于 CC0 協(xié)議
這可能是我看的步驟最清晰詳細(xì)的一個教程了。 ??