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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

第一項(xiàng)的Y軸值：

解釋圖：

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

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