導(dǎo)讀：頂部吸附菜單是系統(tǒng)中常見的菜單，這種菜單一般是在頁面中的某一個(gè)位置，然后在滾動(dòng)的過程中一旦它要從屏幕中消失了就直接吸附在頁面的頂部，這樣可以快速導(dǎo)航菜單下的內(nèi)容。本文作者用Axure分享了如何制作頂部吸附菜單，一起來看看吧。

一、制作完成后應(yīng)具備以下效果

1. 當(dāng)頁面滾動(dòng)到菜單下方時(shí)，菜單吸附到頁面的頂部
2. 點(diǎn)擊某個(gè)菜單內(nèi)容時(shí)，可以快速滾動(dòng)到對(duì)應(yīng)的模塊
3. 當(dāng)頁面滾動(dòng)到菜單上方時(shí)，菜單恢復(fù)到原來的位置。

二、制作材料準(zhǔn)備

1. 菜單欄

菜單里面包括：圖標(biāo)、文本、搜索框、菜單文本、搜索框、背景矩形

里面最重要的就是菜單的文本，我們們用多個(gè)文本標(biāo)簽制作即可，填寫具體菜單文字即可。當(dāng)然你們也可以設(shè)置單選組，設(shè)置選中樣式，在鼠標(biāo)單擊時(shí)通過選中當(dāng)前元件的交互，制作選中變色的下效果。

其他的元件可以根據(jù)你們具體需要來增刪，樣式可以參考下圖。

2. 頂部頁面內(nèi)容

在菜單上方放置需要展示的內(nèi)容，一般都是廣告、介紹或者推廣內(nèi)容，也是根據(jù)實(shí)際情況添加即可。

3. 菜單下方內(nèi)容

菜單下方的內(nèi)容也是根據(jù)需要展示的內(nèi)容來放置，不過順序應(yīng)該按照菜單的順序擺放，擺放后每個(gè)模塊最頂部的位置命個(gè)名，方便后續(xù)做交互，案例中為了方便就命名為123456……分別對(duì)應(yīng)菜單1、菜單2、菜單3……

4. 浮動(dòng)菜單

復(fù)制第一部分做好的菜單，轉(zhuǎn)為動(dòng)態(tài)面板，鼠標(biāo)右鍵可以選擇固定在瀏覽器，固定在頂部為0的位置，默認(rèn)隱藏。這一步其實(shí)可以在我們寫完菜單里面的交互再復(fù)制，這樣就可以少寫一次交互。

三、交互制作

1. 菜單內(nèi)容鼠標(biāo)單擊時(shí)交互

鼠標(biāo)單擊某個(gè)菜單內(nèi)容的文本標(biāo)簽時(shí)，我們用滾動(dòng)到元件的交互，設(shè)置頁面到達(dá)對(duì)應(yīng)的位置，例如，點(diǎn)擊第一個(gè)菜單，就滾動(dòng)內(nèi)容1,前面我們?cè)趦?nèi)容1的頂部元件將名稱修改為1。相同的菜單2、3、4、5、6也是用滾動(dòng)到元件的交互，設(shè)置到內(nèi)容2、3、4、5、6處即可。這個(gè)交互里我們選擇垂直滾動(dòng)，也可以增加動(dòng)畫效果即滾動(dòng)時(shí)間。

浮動(dòng)菜單里面的交互也是一樣的，所以我們可以在寫完這個(gè)交互之后再復(fù)制一個(gè)制作成浮動(dòng)菜單。

2. 窗口滾動(dòng)時(shí)交互

窗口滾動(dòng)時(shí)，我們要分兩種情況，第一種就是窗口滾動(dòng)到菜單的下方，這里我們需要用到window.scrollY函數(shù)，這個(gè)函數(shù)可以獲取窗口在垂直方向上滾動(dòng)的距離，例外一個(gè)是菜單的y值。

那如果window.scrollY大于菜單的y值，這說明頁面已經(jīng)滾動(dòng)到菜單的位置或者超過菜單的位置。所以我們就用顯示事件，將浮動(dòng)菜單顯示出來。因?yàn)榍懊娓?dòng)菜單固定在頁面頂部，所以他就會(huì)一直保持在頂部的位置。

如果上面的情況不成立，window.scrollY小于菜單的y值，即頁面還沒有滾動(dòng)到菜單的位置，那么我們就用隱藏的交互，將浮動(dòng)菜單隱藏起來即可。

這樣我們就完成了頂部吸附菜單的原型模板了，感興趣的同學(xué)們可以動(dòng)手試試，謝謝您的閱讀，我們下期見，88~

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

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