本文為大家分享了如何使用條件函數(shù)，使窗口在滾動(dòng)到不同位置的時(shí)候，頂部的導(dǎo)航欄定位到不同的位置，enjoy！

先上效果

這次分享如何使用條件函數(shù)使窗口在滾動(dòng)到不同位置的時(shí)候，頂部的導(dǎo)航欄定位到不同的位置，以起到引導(dǎo)用戶快速定位到不同分類(lèi)的作用，這種實(shí)現(xiàn)方式在電商以及外賣(mài)類(lèi)型的產(chǎn)品中居多，這里我參考了部分平臺(tái)的內(nèi)容，制作了一個(gè)簡(jiǎn)易的版本為大家講解下如何實(shí)現(xiàn)。

首先來(lái)理一下這個(gè)效果實(shí)現(xiàn)的思路：

• 導(dǎo)航欄有兩種狀態(tài)，顯示以及隱藏，在滑動(dòng)到特定位置的時(shí)候，觸發(fā)導(dǎo)航欄顯示或隱藏；
• 導(dǎo)航欄在顯示的狀態(tài)時(shí)，必須固定到一個(gè)不變的位置；
• 導(dǎo)航欄分類(lèi)具有兩個(gè)狀態(tài)，選中和未選中，當(dāng)商品菜單滑動(dòng)到特定位置時(shí)，對(duì)應(yīng)的分類(lèi)顯示為選中。

01

根據(jù)該效果圖準(zhǔn)備以下元件，并擺放好對(duì)應(yīng)的位置，也可以根據(jù)自己情況增減，不需要花太多時(shí)間在這部分內(nèi)容上，重要的是理解實(shí)現(xiàn)原理。

需要我的RP文件的可以在公眾號(hào)后臺(tái)回復(fù)關(guān)鍵詞“吸附”。

02

• 拖入兩個(gè)動(dòng)態(tài)面板，分別命名為：【導(dǎo)航欄】和【內(nèi)容框架】；
• 上圖中手機(jī)外框的母版在最底層，【內(nèi)容框架】在母版上層，【導(dǎo)航欄】在【內(nèi)容框架】上層；

• 將動(dòng)態(tài)面板【導(dǎo)航欄】設(shè)置為“隱藏”，設(shè)置完呈現(xiàn)為黃色；
• 設(shè)置該動(dòng)態(tài)面板固定到瀏覽器，位置為當(dāng)前你操作時(shí)擺放的位置；

• 隨后雙擊動(dòng)態(tài)面板【導(dǎo)航欄】，在‘State1’中將之前準(zhǔn)備的四個(gè)文本標(biāo)簽擺放至合適位置；

• 選中全部文本標(biāo)簽，設(shè)置”選中時(shí)”的文字和填充色改變?yōu)椴煌伾?/li>

3

• 點(diǎn)擊【內(nèi)容框架】動(dòng)態(tài)面板，將其設(shè)置為可以’縱向滾動(dòng)’；
• 隨后雙擊該動(dòng)態(tài)面板，進(jìn)入‘State1’；

• 在動(dòng)態(tài)面板內(nèi)點(diǎn)擊任意空白位置，雙擊“滾動(dòng)時(shí)”為其添加‘Case1’；

• 先為‘Case1’添加條件，判斷值為:[[This.scrollY]] >= 160。（注意160為我當(dāng)前操作的位置，你們隨意）；

• 然后添加符合設(shè)定的條件時(shí)的動(dòng)作為顯示【導(dǎo)航欄】。

04

• 繼續(xù)為“滾動(dòng)時(shí)”添加‘Case2’；
• 設(shè)定如果不滿足‘Case1’設(shè)定的條件為隱藏【導(dǎo)航欄】；

• 為“滾動(dòng)時(shí)”添加第三個(gè)‘Case3’，設(shè)定條件與‘Case1’中的相同，但指向的值為[[chaozhi.top]]，這里的‘chaozhi’是通過(guò)添加局部變量而來(lái)的，具體操作如上圖；
• 完成條件設(shè)定后，設(shè)置符合該條件時(shí)執(zhí)行的動(dòng)作為：選中動(dòng)態(tài)面板【導(dǎo)航欄】中的‘超值套餐’這個(gè)元件；
• 然后右鍵單擊‘Case3’將“Else If”轉(zhuǎn)換為“If”。（思考下這里為什么要這樣）；

5

• 隨后的Case4、Case5、Case6都進(jìn)行相應(yīng)的條件判斷和執(zhí)行動(dòng)作設(shè)置；
• 在Case7中，則設(shè)定條件為不滿足Case3、Case4、Case5、Case6，執(zhí)行動(dòng)作為選中“折扣”元件；
• 所有【內(nèi)容框架】的交互事例設(shè)置如上圖。

到這里整個(gè)制作過(guò)程就結(jié)束了，這個(gè)案例中主要的難點(diǎn)在于對(duì)函數(shù)的理解。如果能夠理解函數(shù)的設(shè)定，可以在這個(gè)基礎(chǔ)上增加點(diǎn)擊導(dǎo)航欄中的文本標(biāo)簽然后移動(dòng)到相應(yīng)的商品位置的效果，或者再進(jìn)階一步對(duì)導(dǎo)航欄進(jìn)行滑動(dòng)等效果。大家可以自行嘗試，遇到問(wèn)題歡迎一起來(lái)交流討論。

End

（收藏文章，不怕找不到?）

作者：杰森，公眾號(hào)：十八般產(chǎn)品

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

題圖來(lái)自Unsplash，基于CC0協(xié)議