頁面向下滾動(dòng)時(shí)導(dǎo)航頂部吸附效果，這是無論在Web端還是移動(dòng)端都有一種效果。
頁面頂部是宣傳圖片，圖片下方是導(dǎo)航菜單，當(dāng)瀏覽器窗口滾動(dòng)條向下拉動(dòng)或鼠標(biāo)滾輪向下滾動(dòng)時(shí)（移動(dòng)端為手指向上滑動(dòng)屏幕），一旦瀏覽器窗口頂部邊緣超過導(dǎo)航菜單的位置，導(dǎo)航菜單開始固定在瀏覽器頂部邊緣的位置，不再隨頁面向上移動(dòng)。（圖1）
效果動(dòng)畫：
（圖1）
說到這個(gè)效果，我想起有人問過：Axure有必要學(xué)函數(shù)嗎？搞那么復(fù)雜有必要嗎？
那么，大家在看后面的內(nèi)容之前，先思考一下。這個(gè)效果怎么實(shí)現(xiàn)？
————————————我是風(fēng)騷的分割線——————————————-
回答上面的提問：這個(gè)效果只有通過函數(shù)才能簡潔正確的實(shí)現(xiàn)。
分析一下這個(gè)效果的過程：
1、交互什么時(shí)候觸發(fā)？
答：瀏覽器窗口滾動(dòng)的時(shí)候。
2、分別有幾種情形？
答：兩種情形，一種是超過指定的距離，一種是未超過指定的距離。
3、需要判斷什么內(nèi)容？
答：需要判斷瀏覽器窗口滾動(dòng)的距離。
4、瀏覽器窗口的滾動(dòng)距離怎么獲。
答：通過函數(shù)“Window.scrollY”。
好了，分析完畢，下面是實(shí)現(xiàn)過程。
1、先準(zhǔn)備元件。（圖2）
（圖2）
- 頂部是輪播圖片，這個(gè)效果在我的網(wǎng)站、視頻、書籍（圖里的那個(gè)），都能夠找到，在此不做講解。
- 圖片下面是導(dǎo)航菜單。因?yàn)閷?dǎo)航菜單要統(tǒng)一移動(dòng)，所以可以放入幾個(gè)矩形作為菜單項(xiàng)，然后全選，點(diǎn)擊鼠標(biāo)右鍵，在菜單里選擇【轉(zhuǎn)換為動(dòng)態(tài)面板】，這個(gè)動(dòng)態(tài)面板命名為“menu”。之后，我們在交互中移動(dòng)動(dòng)態(tài)面板就能夠移動(dòng)所有菜單項(xiàng)了。這里需要注意的是，動(dòng)態(tài)面板要置于頂層，以免頁面內(nèi)容滾動(dòng)時(shí)覆蓋導(dǎo)航菜單。還有就是幾下動(dòng)態(tài)面板的y軸坐標(biāo)，一會(huì)兒交互中要用到。
- 導(dǎo)航菜單下面是頁面的內(nèi)容，這個(gè)案例只是放了一些文本標(biāo)簽和文本段落，表示文章內(nèi)容。這里要注意的是內(nèi)容一定要足夠多，只有內(nèi)容高度超過瀏覽器窗口高度時(shí)，才能夠進(jìn)行滾動(dòng)瀏覽。
2、添加交互。
- 瀏覽器窗口滾動(dòng)的事件，在軟件中下部的【頁面交互】中設(shè)置。雙擊【窗口滾動(dòng)時(shí)】的事件名稱，打開用力編輯。額…用例編輯。（圖3）
（圖3）
- 第一種情形（Case 1） ，我們需要先完成滾動(dòng)超過指定的距離時(shí)的交互，這里需要進(jìn)行對滾動(dòng)距離的判斷。在用例編輯窗口，點(diǎn)擊【編輯條件】，判斷窗口的滾動(dòng)距離是否大于240。
（圖4）
- 當(dāng)滿足上述條件時(shí)，【移動(dòng)】動(dòng)態(tài)面板“menu”【到達(dá)】x軸“0”y軸“[[Window.scrollY]]”的位置。“[[Window.scrollY]]”就是窗口當(dāng)前滾動(dòng)的距離，也就是瀏覽器窗口上邊緣在頁面中的位置。在瀏覽器窗口滾動(dòng)時(shí)，將動(dòng)態(tài)面板“menu”移動(dòng)到這個(gè)位置，就是將它時(shí)時(shí)移動(dòng)到瀏覽器窗口的上邊緣的位置，也就是頂部吸附效果。（圖5）
（圖5）
- 完成了第一種情形后，再次雙擊事件名稱或者點(diǎn)擊添加用例，編輯第二種情形。軟件這個(gè)時(shí)候會(huì)自動(dòng)給出【Else If True】，表示否則的情況；在用例編輯中我們設(shè)置【移動(dòng)】動(dòng)態(tài)面板“menu”【到達(dá)】x軸“0”y軸“240”的位置，也就是回到初始位置。（圖3）
- 最后，大家可能還有一個(gè)疑問，就是“[[Window.scrollY]]”從何而來？其實(shí)，函數(shù)是可以直接輸入使用的，如果記不住單詞，也可以點(diǎn)擊界面中的“fx”（圖4與圖5中箭頭指向位置），在打開的窗口中點(diǎn)擊【插入變量或者函數(shù)…】，通過選擇來完成輸入。（圖6）
（圖6）
以上就是導(dǎo)航菜單頂部吸附效果實(shí)現(xiàn)的分析與過程。大家不難發(fā)現(xiàn)，其實(shí)使用函數(shù)并不復(fù)雜，關(guān)鍵在與知道函數(shù)的用途與使用方法。
所以，原型中使用函數(shù)，旨在解決問題和提高效率，不要為了使用而使用，也不要對其有偏見而放棄使用。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。