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

<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">
                        <a class="aritcle_card_img" href="/xiazai/code/8725">
                            <img src="https://img.php.cn/upload/webcode/000/000/007/175638960279467.png" alt="bee餐饮点餐外卖小程序">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/8725">bee餐饮点餐外卖小程序</a>
                            <p>bee餐饮点餐外卖小程序是针对餐饮行业推出的一套完整的餐饮解决方案，实现了用户在线点餐下单、外卖、叫号排队、支付、配送等功能，完美的使餐饮行业更高效便捷！功能演示：1、桌号管理登录后台，左侧菜单 “桌号管理”，添加并管理你的桌号信息，添加以后在列表你将可以看到 ID 和 密钥，这两个数据用来生成桌子的二维码2、生成桌子二维码例如上面的ID为 308，密钥为 d3PiIY，那么现在去左侧菜单微信设置</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="bee餐饮点餐外卖小程序">
                                <span>1</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/8725" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="bee餐饮点餐外卖小程序">
                        </a>
                    </div>
                
  </div>
</div>

.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; /* 确保菜单位于其他内容之上 */
}

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');
  }
});