很實用的干貨｜浮動固定菜單與樓層導航實踐

今天，我們結合浮動固定菜單欄和樓層導航，實現同一界面內的錨點定位。

想必很多人已經見過浮動固定菜單和樓層導航的案例，浮動固定菜單的場景非常的常見，人人都是產品經理的產品經理導航（ http://dh.woshipm.com/ ）就是一個典型的浮動固定菜單的場景，當窗口向下滾動超過一定距離時，菜單欄固定在瀏覽器窗口的最上方：

當一個頁面內容較多時，我們又經常以樓層的方式快速導航，并且在頁面的右下角有一個返回到頂部的按鈕。單擊對應的樓層按鈕，快速定位到該樓層，這在一些電商網站中出現較多，例如京東網首頁：

今天，我們結合浮動固定菜單欄和樓層導航，實現同一界面內的錨點定位，完成后的效果圖如下：

單擊這里 查看在線演示

從這個例子里，我們可以掌握的知識點有如下幾個：

• 關于動態面板“固定到瀏覽器”屬性的應用
• 浮動固定菜單欄的設置技巧
• 滾動到元件動作的應用
• 窗口滾動時事件的處理
• 自動適應窗口寬度的設置

一、界面布局

1、標題欄

添加一個無邊框灰色矩形框，大小1250*66，命名title，位置在（0，80），模擬菜單欄。

復制這個矩形框，命名為menu，模擬位于頂部的浮動固定菜單，位置在（0，0）右鍵轉換為動態面板，命名為float_title，右鍵設置順序為置于頂層，完成后的效果如下：

2、樓層導航按鈕

添加一個矩形框，大小80*50，雙擊設置文字為“一樓”，右鍵設置交互樣式鼠標經過時填充色為深灰色：

再設置選中狀態的樣式為藍底白字：

復制這個按鈕7個，分別修改文字內容為“二樓”到“八樓”，自上而下順序排列：

給8個按鈕分別命名button1到button8，選中這8個矩形，右鍵設置選項組為buttons：

然后再右鍵轉換為動態面板，命名為float_panel，放在（0,475）處。

3、樓層內容

我們使用大的矩形塊來模擬每一個樓層，添加一個矩形框，大小900*220，雙擊設置文字內容為“一樓”，命名為floor1，復制floor1總共7個（復制這么多是讓窗口在垂直方向有足夠多的樓層，讓頁面出現垂直滾動條），修改名稱分別為“二樓”到“八樓”，依次從上到下排列，間距設置為60。選中這8個矩形，右鍵轉換為動態面板，命名為floors，放在（160,185）處，完成后的效果圖如下：

4、返回頂部按鈕

添加一個矩形，大小70*60，右鍵轉換為動態面板，命名為back_top，移動（1100,754）處，完成后的效果圖如下：

在初始狀態下，頂部浮動固定菜單欄和回到頂部按鈕是不可見的，只有在窗口向下滾動一定距離后才出現，因此我們先將這兩個動態面板隱藏起來（淺黃色部分是隱藏的動態面板）：

到這里我們已經完成示例中所有的布局部分，下面來開始處理事件。

二、動態面板屬性設置

有幾個動態面板的“固定到瀏覽器”屬性需要設置一下，以便于在顯示時能按照設置的屬性顯示。

頂部菜單欄的“固定到瀏覽器”屬性：水平居中，垂直居上

左側樓層導航按鈕的“固定到瀏覽器”屬性：水平居左，垂直居中

返回頂部按鈕的“固定到瀏覽器”屬性：水平居右，邊距20，垂直居下，邊距20

三、事件處理

這里包括以下幾個事件需要處理：

1、頁面載入時事件

為了界面更加美觀點，在頁面初始化事件里，我們將菜單欄設置和當前窗口一樣的大小，將樓層內容的大小設置為比窗口寬度小一點并且居中顯示。

因為有8個樓層，我們通過一個全局變量來設置一下值，所有樓層寬度減去這個值，設置統一寬度，全局變量名為distance，默認值為400：

在頁面空白處點擊，在右側屬性里給頁面添加頁面載入時事件：

1. 添加頁面載入時事件
2. 先顯示左側的樓層導航動態面板
3. 設置菜單欄title和隱藏的浮動菜單欄的menu的大小，寬度為窗口寬度Window.width，高度66保持不變
4. 設置8個樓層的寬度為窗口寬度關于distance值，即[[Window.width-distance]]，高度保持不變為220。
5. 移動8個樓層所在的動態面板位置在水平中央位置
6. 通過變量設置樓層的水平位置
7. 添加局部變量LVAR1，指向樓層所在的動態面板
8. 水平位置計算方式為[[(Window.width-LVAR1.width)/2]]，即窗口寬度減去樓層寬度再除以2

2、窗口滾動事件

窗口在滾動起過標題欄的位置后，顯示浮動固定菜單欄和返回頂部按鈕：

1. 添加窗口滾動時事件
2. 添加條件，如果窗口滾動距離Window.scrollYgt;=80
3. 則顯示浮動固定菜單欄和回到頂部的按鈕
4. 觸發控制按鈕control的單擊事件（見后面說明）

否則就隱藏浮動固定菜單欄和回到頂部的按鈕：

添加個熱點區域control，大小10*10，添加單擊事件，判斷窗口滾動位置，設置對應按鈕為選中狀態：

3、樓層導航按鈕單擊事件

給樓層導航的第一個按鈕添加單擊事件，單擊后滾動元件到頂部菜單title，配合線性動畫：

1. 選擇導航一樓按鈕
2. 添加鼠標單擊事件
3. 設置滾動到元件動作
4. 選擇滾動到floor1
5. 設置僅垂直滾動，配合線性動畫
6. 設置當前按鈕為選中狀態

其它7個按鈕依次選擇滾動到floor2到floor8。

4、回到頂部單擊事件

回到頂部按鈕事件與導航按鈕事件相同，只是滾動到標題欄title：

四、F5預覽

所有布局和事件都已經處理完成，可以F5預覽一下看看效果了！

源文件下載地址： http://pan.baidu.com/s/1boDEPJp

如果覺得有幫助就贊一下哦^_^

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