當(dāng)頁面往下滾動(dòng)時(shí)，導(dǎo)航跟隨頁面一起，點(diǎn)擊右側(cè)圖標(biāo)可直接返回頂部。那這個(gè)效果是如何實(shí)現(xiàn)的呢，一起來文中看看~

如下圖：

頂部導(dǎo)航跟隨頁面滾動(dòng)

線上效果圖，查看：頂部導(dǎo)航跟隨滾動(dòng)

制作方法

1. 添加導(dǎo)航與頁面

按平時(shí)制作導(dǎo)航與頁面的方式制定，無需設(shè)置任何交互效果，但為了看到頁面效果，頁面建議添加長(zhǎng)頁面，才可出現(xiàn)滾動(dòng)。

2. 添加滾動(dòng)圖標(biāo)

添加滾動(dòng)圖標(biāo)，并設(shè)置為隱藏。

滾動(dòng)圖標(biāo)

針對(duì)圖標(biāo)做交互操作，設(shè)置為搖擺，時(shí)間為500。

圖標(biāo)交互

3. 添加熱區(qū)

添加一個(gè)熱區(qū)，并放置與菜單同坐標(biāo)值位置。

熱區(qū)

4、頁面窗口滾動(dòng)交互

在頁面添加窗口滾動(dòng)交互，添加用例

窗口滾動(dòng)交互

添加用例一，移動(dòng)導(dǎo)航，設(shè)置為絕對(duì)位置，x值為[[Target.x]]，y值為[[Window.scrollY]]。

用例1

添加用例二，添加條件，設(shè)置值>10，顯示滾動(dòng)圖標(biāo)，動(dòng)畫逐漸500s。

用例2

設(shè)置用例三，設(shè)置滾動(dòng)圖標(biāo)隱藏，動(dòng)畫逐漸500s。

用例3

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

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