本文內(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è)、鈦媒體….等等，都用此交互效果展示頻道分類，便于用戶點擊，減少用戶學(xué)習(xí)成本。

效果該怎么實現(xiàn)？

步驟1：建模塊

我們新建3個板塊，分別起上名字頭部、廣告、頻道導(dǎo)航。

別光看著，來動手一起練習(xí)吧~

步驟2：起名字，后便找

選中板塊后，給每一個板塊名稱寫上。

步驟3：配置判斷條件

前提：鼠標(biāo)不要選中任何板塊，如果你選中了頭部板塊，點擊下背景即可取消板塊選中。

①右側(cè)點擊窗口滾動時。

②點擊添加條件，進(jìn)入條件配置頁面。

③選擇值。

④點擊fx>然后點擊插入變量或函數(shù),>最后鼠標(biāo)往下滑到窗口處，選擇Window.scrollY，確認(rèn)。

⑤回到條件配置頁面，點擊+號旁邊的fX按鈕>然后點擊添加區(qū)域變數(shù)>選擇元件>選擇廣告，確認(rèn)。

⑥回到條件配置頁面，選擇大于。

解釋：剛剛我們設(shè)置的是，當(dāng)窗口滾動時，向下所滾動的距離大于廣告板塊高度的值條件。

步驟4：添加頻道導(dǎo)航提起案例

條件設(shè)定好后，點擊確認(rèn)。

①找到移動并點擊它>然后選擇頻道導(dǎo)航>最后移動選框中選擇“到達(dá)”。

②以上操作完成后，點擊y處的fx>然后點擊插入變量或函數(shù)>最后選擇Window.scrollY，點擊確認(rèn)。

解釋：

• 步驟3中，當(dāng)窗口滾動時，向下所滾動的距離大于廣告板塊高度的值。
• 步驟4中，移動頻道導(dǎo)航，到達(dá)坐標(biāo)X0，Y窗口滾動的起點，也就是頂部位置。

頻道導(dǎo)航提起，懸浮至置頂效果大功告成。

注意點：

1. 頻道導(dǎo)航板塊別忘了置頂，不置頂提起懸浮時會被其它板塊蓋住。
2. 練習(xí)時，請在頻道板塊下面增加點內(nèi)容，隨便打點字，頁面展示區(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)值。

②點開案例，將記住的Y軸坐標(biāo)值填充到Y(jié)字段。

解釋：

• 案例2：當(dāng)窗口滾動時，向上向下所滾動的距離小于廣告板塊高度的值時。
• 案例3：移動頻道導(dǎo)航，到達(dá)坐標(biāo)X0，Y220的位置（自己起始位置）。

效果預(yù)覽：https://m45sa3.axshare.com

以上是作者的全部講解，有點啰嗦，希望能幫助到你們。

如有疑問歡迎留言，一起探討，學(xué)習(xí)。

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

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