国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

本文給大家介紹的是導(dǎo)航欄如何根據(jù)滾動條同步選中，一起來看看~

實現(xiàn)效果：選中導(dǎo)航欄中的菜單，窗口內(nèi)容顯示對應(yīng)的內(nèi)容；窗口滾動時，選中導(dǎo)航欄對應(yīng)的菜單。

創(chuàng)建導(dǎo)航欄

（1）拖入動態(tài)面板，命名“左側(cè)導(dǎo)航欄

（3）右鍵“左側(cè)導(dǎo)航欄”選中【固定到瀏覽器】

此步驟目的為，當(dāng)滾動鼠標(biāo)時，左邊導(dǎo)航欄不隨之滾動。

（3）選中并打開動態(tài)面板“左側(cè)導(dǎo)航欄”狀態(tài)1，拖入三個菜單按鈕

分別命名“1”對應(yīng)第一項，“2”對應(yīng)第二項，“3”對應(yīng)第三項，并設(shè)置鼠標(biāo)按下和選中的交互效果。

為了讓菜單保存單選中狀態(tài)，將“1”、“2”、“3”加入同一個選項組。

創(chuàng)建導(dǎo)航欄對應(yīng)的滾動內(nèi)容

右側(cè)編輯導(dǎo)航欄對應(yīng)的滾動內(nèi)容，當(dāng)然內(nèi)容還可以是組合等形式。

注意 ：設(shè)置頁面引入時，默認(rèn)選中第一項。

設(shè)置選中導(dǎo)航欄，右側(cè)滾動的相應(yīng)的內(nèi)容

當(dāng)選中左側(cè)菜單欄1時，右側(cè)滾動內(nèi)容顯示到第一項；當(dāng)選中左側(cè)菜單欄2時，右側(cè)滾動內(nèi)容顯示到第二項；當(dāng)選中左側(cè)菜單欄3時，右側(cè)滾動內(nèi)容顯示到第三項。

（1）選中導(dǎo)航欄“1”，設(shè)置交互事件“鼠標(biāo)單擊時”，設(shè)置當(dāng)前元件為“選中”狀態(tài)

（2）設(shè)置“滾動到元件”→“第一項”

設(shè)置右側(cè)滾動，導(dǎo)航欄選中相應(yīng)菜單

第一項的內(nèi)容處于瀏覽器窗口的上半部分，則選中導(dǎo)航欄的1菜單；

第二項的內(nèi)容處于瀏覽器窗口的上半部分，則選中導(dǎo)航欄的2菜單；

第三項的內(nèi)容處于瀏覽器窗口的上半部分，則選中導(dǎo)航欄的3菜單。

（1）創(chuàng)建“頁面”“窗口滾動時”交互事件，注意順序，右側(cè)元件，從下往上依次創(chuàng)建對應(yīng)的滾動事件

第一項的內(nèi)容處于瀏覽器窗口的上半部分：

理解：瀏覽器中頁面垂直滾動的距離+打開的瀏覽器當(dāng)前高度/2>=第一項的Y軸值時

即：瀏覽器中頁面垂直滾動的距離+打開頁面的瀏覽器當(dāng)前高度/2=[[Window.scrollY+Window.height/2]]

第一項的Y軸值：

解釋圖：

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

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