国产a一级毛片爽爽影院_欧美日韩亚洲中字二区在线播放_国产在线每日都有更新_日韩中文字幕tv在线看_日韩美女婬乱大片A级网站_韩国无遮免费羞羞漫画_久久亚洲精品无码播放偷妻_国产成人777爽视频_色噜噜狠狠成人中文综合18_国产精品免费高清在线观看

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

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

創(chuàng)建導航欄

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

（3）右鍵“左側導航欄”選中【固定到瀏覽器】

此步驟目的為，當滾動鼠標時，左邊導航欄不隨之滾動。

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

分別命名“1”對應第一項，“2”對應第二項，“3”對應第三項，并設置鼠標按下和選中的交互效果。

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

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

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

注意 ：設置頁面引入時，默認選中第一項。

設置選中導航欄，右側滾動的相應的內(nèi)容

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

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

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

設置右側滾動，導航欄選中相應菜單

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

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

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

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

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

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

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

第一項的Y軸值：

解釋圖：

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

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