如何實(shí)現(xiàn)餓了么點(diǎn)餐左側(cè)菜單隨右側(cè)內(nèi)容滾動的高亮效果？

模擬餓了么點(diǎn)餐左側(cè)菜單的滾動聯(lián)動效果

開發(fā)類似餓了么點(diǎn)餐的左側(cè)菜單滾動高亮效果，需要巧妙地結(jié)合html結(jié)構(gòu)、css樣式和JavaScript邏輯。核心目標(biāo)是：讓左側(cè)菜單項(xiàng)根據(jù)右側(cè)內(nèi)容的滾動位置，實(shí)時(shí)高亮對應(yīng)的菜單選項(xiàng)，提升用戶體驗(yàn)。

首先，我們需要合理的HTML結(jié)構(gòu)，將左側(cè)菜單和右側(cè)內(nèi)容區(qū)域清晰地劃分。

其次，CSS樣式負(fù)責(zé)菜單的視覺呈現(xiàn)，例如使用position: sticky特性，確保菜單在滾動時(shí)固定在視窗內(nèi)。

最后，JavaScript代碼是實(shí)現(xiàn)聯(lián)動效果的關(guān)鍵。它監(jiān)聽右側(cè)內(nèi)容區(qū)域的滾動事件，計(jì)算滾動位置，并根據(jù)位置動態(tài)更新左側(cè)菜單項(xiàng)的樣式，添加或移除高亮類名。

以下是一個(gè)簡化的JavaScript代碼示例，演示如何實(shí)現(xiàn)這種聯(lián)動：

// 獲取所有內(nèi)容區(qū)塊和菜單項(xiàng) const sections = document.querySelectorAll('section'); const menuItems = document.querySelectorAll('.menu-item');  // 監(jiān)聽滾動事件 window.addEventListener('scroll', () => {   let activeSection = '';    // 遍歷所有內(nèi)容區(qū)塊   sections.forEach(section => {     const sectionTop = section.offsetTop;     // 判斷當(dāng)前滾動位置是否在該區(qū)塊范圍內(nèi)     if (window.pageYOffset >= sectionTop - 60) { // 60為調(diào)整值，可根據(jù)實(shí)際情況修改       activeSection = section.id;     }   });    // 遍歷所有菜單項(xiàng)，更新高亮狀態(tài)   menuItems.forEach(item => {     item.classList.remove('active'); // 先移除所有高亮     if (item.dataset.section === activeSection) { // 使用dataset訪問自定義屬性       item.classList.add('active'); // 添加高亮類名     }   }); });

這段代碼中，sections代表右側(cè)內(nèi)容區(qū)塊，menuItems代表左側(cè)菜單項(xiàng)。 dataset.section 屬性存儲了每個(gè)菜單項(xiàng)對應(yīng)的區(qū)塊ID。代碼通過監(jiān)聽scroll事件，計(jì)算滾動位置，找到當(dāng)前可見的區(qū)塊，并高亮對應(yīng)的菜單項(xiàng)。 -60 的數(shù)值用于微調(diào)高亮觸發(fā)點(diǎn)，可根據(jù)實(shí)際頁面布局調(diào)整。

當(dāng)然，實(shí)際應(yīng)用中可能需要更復(fù)雜的邏輯處理，例如處理多個(gè)菜單項(xiàng)對應(yīng)同一個(gè)區(qū)塊的情況，或者更精細(xì)的滾動位置計(jì)算，但核心思路仍然是通過JavaScript監(jiān)聽滾動事件并動態(tài)更新菜單樣式。 希望這個(gè)解釋能幫助您理解并實(shí)現(xiàn)此功能。