如何实现饿了么点餐左侧菜单的滑动和固定效果？

仿饿了么点餐：实现左侧菜单滑动及固定效果

本文将详细讲解如何构建一个类似饿了么点餐应用的左侧滑动菜单，并实现菜单在滚动时固定于屏幕顶部的效果，提升用户体验。

功能需求

目标效果包含以下关键特性：

1. 垂直滑动: 用户可上下滑动浏览左侧菜单中的各项内容。
2. 顶部固定: 当页面滚动到一定位置后，左侧菜单固定在屏幕顶部，方便用户在浏览页面其他内容时随时查看菜单选项。

实现步骤及代码示例

1. HTML 结构: 创建包含左侧菜单和右侧内容的HTML结构。

  

    

      
菜单项1
      
菜单项2
      
菜单项3
      
    
  
  

    
    
这是一个很长的内容区域，用于测试菜单固定效果。
    
...

							

								
								

									bee餐饮点餐外卖小程序
									
bee餐饮点餐外卖小程序是针对餐饮行业推出的一套完整的餐饮解决方案，实现了用户在线点餐下单、外卖、叫号排队、支付、配送等功能，完美的使餐饮行业更高效便捷！功能演示：1、桌号管理登录后台，左侧菜单 “桌号管理”，添加并管理你的桌号信息，添加以后在列表你将可以看到 ID 和 密钥，这两个数据用来生成桌子的二维码2、生成桌子二维码例如上面的ID为 308，密钥为 d3PiIY，那么现在去左侧菜单微信设置
								
								下载 
							
						
  

2. CSS 样式: 定义样式，控制菜单布局和固定效果。

.container {
  display: flex;
}

.left-menu {
  width: 100px;
  background-color: #f0f0f0;
  overflow-y: auto; /* 允许垂直滚动 */
}

.left-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.left-menu li {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.right-content {
  flex-grow: 1;
  padding: 20px;
}

.fixed-menu {
  position: fixed;
  top: 0;
  width: 100px;
  background-color: #f0f0f0;
  z-index: 100; /* 确保菜单位于其他内容之上 */
}

3. JavaScript 逻辑: 使用JavaScript监听滚动事件，控制菜单的固定状态。

window.addEventListener('scroll', function() {
  const leftMenu = document.querySelector('.left-menu');
  const menuRect = leftMenu.getBoundingClientRect();

  if (menuRect.top <= 0) {
    leftMenu.classList.add('fixed-menu');
  } else {
    leftMenu.classList.remove('fixed-menu');
  }
});

效果预览

上述代码实现了一个基本的左侧菜单滑动和固定效果。当页面滚动时，左侧菜单会在到达顶部时自动固定，提供更好的用户体验。

进一步优化

为了更精细地控制效果，可以考虑以下优化：

• 动画效果: 添加滚动动画，使固定效果更平滑。
• 响应式设计: 确保菜单在不同屏幕尺寸下都能正常显示。
• 菜单项高亮: 根据用户选择，高亮显示当前选中的菜单项。

通过以上步骤，您可以轻松创建类似饿了么点餐应用的左侧菜单，并提升应用的用户体验。 记住根据实际需求调整CSS样式和JavaScript逻辑。