必很多人已經見過浮動固定菜單和樓層導航的案例，浮動固定菜單的場景非常的常見，人人都是產品經理的產品經理導航（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.scrollY>=80
3. 則顯示浮動固定菜單欄和回到頂部的按鈕
4. 觸發控制按鈕control的單擊事件（見后面說明）

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

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

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

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

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

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

4、回到頂部單擊事件

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

四、F5預覽

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

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

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

天南地北大拜年# 一起領紅包>根據您提供的代碼，這是一個使用 jQuery 來實現網頁導航欄動態位置調整、滾動到特定內容區域時高亮導航項，以及用戶留言和評價功能的網頁。下面是對這些功能的報告：

### 1. 導航欄位置調整

- **功能描述**: 導航欄的位置會根據瀏覽器窗口的大小動態調整，以確保它在視覺上居中顯示。

- **實現方法**: 使用 jQuery 監聽 `resize` 事件，實時計算導航欄的寬度，并動態設置其 `right` CSS屬性。

### 2. 滾動導航高亮

- **功能描述**: 當用戶滾動到網頁的某個特定內容區域時，對應的導航項會被高亮顯示。

- **實現方法**: 首先，獲取每個內容區域的位置頂部值并存入數組。然后，監聽 `scroll` 事件，根據滾動位置判斷當前處于哪個內容區域，并使用 `.addClass("selected")` 來高亮當前導航項。

### 3. 用戶留言功能

- **功能描述**: 用戶可以在網頁上留下自己的意見或建議。

- **實現方法**: 使用 HTML 的 `` 元素創建一個多行文本輸入框，并通過 jQuery 監聽按鈕點擊事件來處理留言的提交。

### 4. 星級評價功能

- **功能描述**: 用戶可以通過點擊星星圖標來對網頁進行評價。

- **實現方法**: HTML 使用 `` 元素創建星星圖標，并通過 jQuery 來監聽點擊事件，根據點擊的星星圖標更新頁面上的評級顯示。

### 5. 功能完善建議

- **用戶體驗**: 增加留言提交后的反饋機制，如提示用戶留言成功或出現錯誤。

- **交互設計**: 對于星級評價，可以增加更多的交互效果，如星星點擊效果，以及評價后的結果展示。

- **響應式設計**: 確保網頁在不同設備上均有良好的顯示效果，包括手機和平板電腦。

- **性能優化**: 對于 `scroll` 和 `resize` 事件，應考慮節流（throttle）或防抖（debounce）技術，以避免過度事件處理導致的性能問題。

### 6. 錯誤和警告

- **代碼錯誤**: 在您的代碼中，有幾個問題需要解決。比如，變量 `sectionHeightArray` 應該在 `$(window).scroll` 事件處理函數外部聲明，否則它可能無法正確引用。此外，按鈕點擊事件處理函數沒有提供，需要補充相應的代碼來處理用戶的交互。

- **跨瀏覽器兼容性**: 需要確保所有的 jQuery 代碼在不同的瀏覽器上都能正常工作，特別是舊版本的瀏覽器。

### 7. 安全性

- **XSS防范**: 確保從用戶那里收集的數據在插入到網頁上之前進行了適當的清理，以防止跨站腳本（XSS）攻擊。

整體而言，該網頁的交互功能對于用戶參與和反饋提供了良好的基礎，但在發布前需要進行詳細的測試和優化以確保最佳的用戶體驗和性能。類圖（15分）：

主題：智能家居控制系統

描述：為一個智能家居控制系統繪制組件圖，展示系統中各個組件如用戶界面、數據存儲、設備控制等的關系

機端左右滑動導航，html正常寫，css超出不換行，隱藏滾動條