模拟饿了么点餐左侧菜单的滚动联动效果
开发类似饿了么点餐的左侧菜单滚动高亮效果，需要巧妙地结合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监听滚动事件并动态更新菜单样式。 希望这个解释能帮助您理解并实现此功能。
