今天，我們結(jié)合浮動(dòng)固定菜單欄和樓層導(dǎo)航，實(shí)現(xiàn)同一界面內(nèi)的錨點(diǎn)定位。

想必很多人已經(jīng)見(jiàn)過(guò)浮動(dòng)固定菜單和樓層導(dǎo)航的案例，浮動(dòng)固定菜單的場(chǎng)景非常的常見(jiàn)，人人都是產(chǎn)品經(jīng)理的產(chǎn)品經(jīng)理導(dǎo)航（http://dh.woshipm.com/）就是一個(gè)典型的浮動(dòng)固定菜單的場(chǎng)景，當(dāng)窗口向下滾動(dòng)超過(guò)一定距離時(shí)，菜單欄固定在瀏覽器窗口的最上方：

當(dāng)一個(gè)頁(yè)面內(nèi)容較多時(shí)，我們又經(jīng)常以樓層的方式快速導(dǎo)航，并且在頁(yè)面的右下角有一個(gè)返回到頂部的按鈕。單擊對(duì)應(yīng)的樓層按鈕，快速定位到該樓層，這在一些電商網(wǎng)站中出現(xiàn)較多，例如京東網(wǎng)首頁(yè)：

今天，我們結(jié)合浮動(dòng)固定菜單欄和樓層導(dǎo)航，實(shí)現(xiàn)同一界面內(nèi)的錨點(diǎn)定位，完成后的效果圖如下：

單擊這里查看在線演示

從這個(gè)例子里，我們可以掌握的知識(shí)點(diǎn)有如下幾個(gè)：

• 關(guān)于動(dòng)態(tài)面板“固定到瀏覽器”屬性的應(yīng)用
• 浮動(dòng)固定菜單欄的設(shè)置技巧
• 滾動(dòng)到元件動(dòng)作的應(yīng)用
• 窗口滾動(dòng)時(shí)事件的處理
• 自動(dòng)適應(yīng)窗口寬度的設(shè)置

一、界面布局

1、標(biāo)題欄

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

復(fù)制這個(gè)矩形框，命名為menu，模擬位于頂部的浮動(dòng)固定菜單，位置在（0，0）右鍵轉(zhuǎn)換為動(dòng)態(tài)面板，命名為float_title，右鍵設(shè)置順序?yàn)橹糜陧攲?，完成后的效果如下?/p>

2、樓層導(dǎo)航按鈕

添加一個(gè)矩形框，大小80*50，雙擊設(shè)置文字為“一樓”，右鍵設(shè)置交互樣式鼠標(biāo)經(jīng)過(guò)時(shí)填充色為深灰色：

再設(shè)置選中狀態(tài)的樣式為藍(lán)底白字：

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

給8個(gè)按鈕分別命名button1到button8，選中這8個(gè)矩形，右鍵設(shè)置選項(xiàng)組為buttons：

然后再右鍵轉(zhuǎn)換為動(dòng)態(tài)面板，命名為float_panel，放在（0,475）處。

3、樓層內(nèi)容

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

4、返回頂部按鈕

添加一個(gè)矩形，大小70*60，右鍵轉(zhuǎn)換為動(dòng)態(tài)面板，命名為back_top，移動(dòng)（1100,754）處，完成后的效果圖如下：

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

到這里我們已經(jīng)完成示例中所有的布局部分，下面來(lái)開(kāi)始處理事件。

二、動(dòng)態(tài)面板屬性設(shè)置

有幾個(gè)動(dòng)態(tài)面板的“固定到瀏覽器”屬性需要設(shè)置一下，以便于在顯示時(shí)能按照設(shè)置的屬性顯示。

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

左側(cè)樓層導(dǎo)航按鈕的“固定到瀏覽器”屬性：水平居左，垂直居中

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

三、事件處理

這里包括以下幾個(gè)事件需要處理：

1、頁(yè)面載入時(shí)事件

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

因?yàn)橛?個(gè)樓層，我們通過(guò)一個(gè)全局變量來(lái)設(shè)置一下值，所有樓層寬度減去這個(gè)值，設(shè)置統(tǒng)一寬度，全局變量名為distance，默認(rèn)值為400：

在頁(yè)面空白處點(diǎn)擊，在右側(cè)屬性里給頁(yè)面添加頁(yè)面載入時(shí)事件：

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

2、窗口滾動(dòng)事件

窗口在滾動(dòng)起過(guò)標(biāo)題欄的位置后，顯示浮動(dòng)固定菜單欄和返回頂部按鈕：

1. 添加窗口滾動(dòng)時(shí)事件
2. 添加條件，如果窗口滾動(dòng)距離Window.scrollY>=80
3. 則顯示浮動(dòng)固定菜單欄和回到頂部的按鈕
4. 觸發(fā)控制按鈕control的單擊事件（見(jiàn)后面說(shuō)明）

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

添加個(gè)熱點(diǎn)區(qū)域control，大小10*10，添加單擊事件，判斷窗口滾動(dòng)位置，設(shè)置對(duì)應(yīng)按鈕為選中狀態(tài)：

3、樓層導(dǎo)航按鈕單擊事件

給樓層導(dǎo)航的第一個(gè)按鈕添加單擊事件，單擊后滾動(dòng)元件到樓層floor1，配合線性動(dòng)畫(huà)：

1. 選擇導(dǎo)航一樓按鈕
2. 添加鼠標(biāo)單擊事件
3. 設(shè)置滾動(dòng)到元件動(dòng)作
4. 選擇滾動(dòng)到floor1
5. 設(shè)置僅垂直滾動(dòng)，配合線性動(dòng)畫(huà)
6. 設(shè)置當(dāng)前按鈕為選中狀態(tài)

其它7個(gè)按鈕依次選擇滾動(dòng)到floor2到floor8。

4、回到頂部單擊事件

回到頂部按鈕事件與導(dǎo)航按鈕事件相同，只是滾動(dòng)到標(biāo)題欄title：

四、F5預(yù)覽

所有布局和事件都已經(jīng)處理完成，可以F5預(yù)覽一下看看效果了！

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

如果覺(jué)得有幫助就贊一下哦^_^

本文由 @原型設(shè)計(jì)工場(chǎng)?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。