仿饿了么点餐：实现左侧菜单滑动及固定效果
本文将详细讲解如何构建一个类似饿了么点餐应用的左侧滑动菜单，并实现菜单在滚动时固定于屏幕顶部的效果，提升用户体验。
功能需求
目标效果包含以下关键特性：
- 垂直滑动: 用户可上下滑动浏览左侧菜单中的各项内容。
- 顶部固定: 当页面滚动到一定位置后，左侧菜单固定在屏幕顶部，方便用户在浏览页面其他内容时随时查看菜单选项。
实现步骤及代码示例
- HTML 结构: 创建包含左侧菜单和右侧内容的HTML结构。
<div class="container">
<div class="left-menu">
<ul>
<li>菜单项1</li>
<li>菜单项2</li>
<li>菜单项3</li>
<!-- ...更多菜单项 -->
</ul>
</div>
<div class="right-content">
<!-- 右侧内容区域 -->
<p>这是一个很长的内容区域，用于测试菜单固定效果。</p>
<p>...</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1600" title="GentleAI"><img
src="https://img.php.cn/upload/ai_manual/000/969/633/68b6dbb8eec69167.png" alt="GentleAI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1600" title="GentleAI">GentleAI</a>
<p>GentleAI是一个高效的AI工作平台，为普通人提供智能计算、简单易用的界面和专业技术支持。让人工智能服务每一个人。</p>
</div>
<a href="/ai/1600" title="GentleAI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</div>
</div>
- 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; /* 确保菜单位于其他内容之上 */
}
- 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逻辑。
