中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

一、制作完成后應具備以下效果

1. 當頁面滾動到菜單下方時，菜單吸附到頁面的頂部
2. 點擊某個菜單內容時，可以快速滾動到對應的模塊
3. 當頁面滾動到菜單上方時，菜單恢復到原來的位置。

二、制作材料準備

1. 菜單欄

菜單里面包括：圖標、文本、搜索框、菜單文本、搜索框、背景矩形

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

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

2. 頂部頁面內容

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

3. 菜單下方內容

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

4. 浮動菜單

復制第一部分做好的菜單，轉為動態面板，鼠標右鍵可以選擇固定在瀏覽器，固定在頂部為0的位置，默認隱藏。這一步其實可以在我們寫完菜單里面的交互再復制，這樣就可以少寫一次交互。

三、交互制作

1. 菜單內容鼠標單擊時交互

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

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

2. 窗口滾動時交互

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

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

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

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

本文由 @AI產品人 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議