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

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

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

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

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

1. 菜單欄

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

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

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

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

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

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

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

4. 浮動菜單

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

三、交互制作

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

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

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

2. 窗口滾動時交互

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

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

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

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

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

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