模擬餓了么點餐左側菜單的滾動聯動效果
開發類似餓了么點餐的左側菜單滾動高亮效果，需要巧妙地結合html結構、css樣式和JavaScript邏輯。核心目標是：讓左側菜單項根據右側內容的滾動位置，實時高亮對應的菜單選項，提升用戶體驗。
首先，我們需要合理的HTML結構，將左側菜單和右側內容區域清晰地劃分。
其次，CSS樣式負責菜單的視覺呈現，例如使用position: sticky特性，確保菜單在滾動時固定在視窗內。
最后，JavaScript代碼是實現聯動效果的關鍵。它監聽右側內容區域的滾動事件，計算滾動位置，并根據位置動態更新左側菜單項的樣式，添加或移除高亮類名。
以下是一個簡化的JavaScript代碼示例，演示如何實現這種聯動：
// 獲取所有內容區塊和菜單項 const sections = document.querySelectorAll('section'); const menuItems = document.querySelectorAll('.menu-item'); // 監聽滾動事件 window.addEventListener('scroll', () => { let activeSection = ''; // 遍歷所有內容區塊 sections.forEach(section => { const sectionTop = section.offsetTop; // 判斷當前滾動位置是否在該區塊范圍內 if (window.pageYOffset >= sectionTop - 60) { // 60為調整值，可根據實際情況修改 activeSection = section.id; } }); // 遍歷所有菜單項，更新高亮狀態 menuItems.forEach(item => { item.classList.remove('active'); // 先移除所有高亮 if (item.dataset.section === activeSection) { // 使用dataset訪問自定義屬性 item.classList.add('active'); // 添加高亮類名 } }); });
這段代碼中，sections代表右側內容區塊，menuItems代表左側菜單項。 dataset.section 屬性存儲了每個菜單項對應的區塊ID。代碼通過監聽scroll事件，計算滾動位置，找到當前可見的區塊，并高亮對應的菜單項。 -60 的數值用于微調高亮觸發點，可根據實際頁面布局調整。
當然，實際應用中可能需要更復雜的邏輯處理，例如處理多個菜單項對應同一個區塊的情況，或者更精細的滾動位置計算，但核心思路仍然是通過JavaScript監聽滾動事件并動態更新菜單樣式。 希望這個解釋能幫助您理解并實現此功能。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
