大家先來看一個效果圖记焊，思考一下這個效果怎么實(shí)現(xiàn)芳杏？移動端菜單頂部吸附效果
步驟：
1、頁面中首頁放入手機(jī)殼圖片抡柿，在手機(jī)上面放入元件內(nèi)容舔琅。 ? ?導(dǎo)航欄滾動在首頁不需滾動，下面內(nèi)容是滾動顯示（分別是輪播圖洲劣、門店位置切換备蚓、功能標(biāo)簽組合、精選項(xiàng)目組合等）囱稽。把需要懸浮的標(biāo)簽【組合】圖標(biāo)或者快捷鍵組合到一起郊尝，并命名為“品相分類”。最后战惊，全選頁面滾動內(nèi)容流昏，點(diǎn)擊鼠標(biāo)右鍵，在菜單中選擇【轉(zhuǎn)換為動態(tài)面板】。
2况凉、在動態(tài)面板的屬性中谚鄙，設(shè)置動態(tài)面板【自動顯示垂直滾動條】。另外動態(tài)面板的高度不能超過手機(jī)內(nèi)部高度刁绒。
3闷营、為動態(tài)面板添加交互。一共包含2個用例（Case）：
用例1：對動態(tài)面板滾動距離是否超過 “品相分類的y”（滾動到菜單頂部組合）進(jìn)行判斷知市，設(shè)置條件【值】【[[This.scrollY]]】【>=】【值】【品相分類的y】傻盟。系統(tǒng)變量“This”表示當(dāng)前元件，“scrollY”表示滾動距離嫂丙。
當(dāng)符合以上條件時娘赴，我們需要【移動】菜單“品相分類”,【到達(dá)】x軸“0”/y軸“[[This.scrollY]]”的位置「。“[[This.scrollY]]”就是動態(tài)面板內(nèi)容滾動的距離诽表，也就是動態(tài)面板內(nèi)容滾動時，上邊緣那一線內(nèi)容的y軸坐標(biāo)位置腥光。在動態(tài)面板內(nèi)容滾動時，將菜單“品相分類”移動到這個位置糊秆，就是將它時時移動到動態(tài)面板上邊緣的位置武福，也就是頂部吸附效果。
用例2：當(dāng)不符合用例1的條件時痘番，也就是動態(tài)面板內(nèi)容的滾動距離小于【品相分類】的y值的時候捉片，我們需要再填加一個用例2，即不符合條件的情形汞舱，并設(shè)置動作【移動】菜單“品相分類”,【到達(dá)】x軸“0”/y軸“【品相分類】的y”的初始位置伍纫。
如有不明白關(guān)注微信公眾號“分享產(chǎn)品知識”，輸入“Axure0528”昂芜，即可獲取到源文件莹规。
