侧边滑出菜单（Off-canvas menu）添加粘性关闭按钮的实现方法

当然可以搞定！当菜单内容很长时，让关闭按钮固定在可视底部确实能大大提升用户体验，下面给你两种简单靠谱的方案，纯CSS就能实现：

方案一：使用position: sticky（最推荐） #

这是最适配这种场景的方案，sticky定位会让元素在滚动到容器边界时自动固定，完全不需要JS，性能还很好。

实现步骤： #

1. 给侧边菜单容器设置可滚动属性，确保内容超出时能正常滚动
2. 给包含关闭按钮的div设置position: sticky和bottom: 0，再加上背景色避免透显下方内容

代码示例：

<!-- 侧边菜单结构 -->
<div class="off-canvas-menu">
  <!-- 长列表菜单内容 -->
  <ul class="menu-links">
    <li><a href="#">链接1</a></li>
    <li><a href="#">链接2</a></li>
    <!-- ... 这里可以放80个链接 ... -->
  </ul>
  <!-- 粘性关闭按钮容器 -->
  <div class="sticky-close-btn">
    <button>关闭菜单</button>
  </div>
</div>

.off-canvas-menu {
  position: fixed;
  left: 0;
  top: 0;
  width: 320px;
  height: 100vh; /* 占满视口高度 */
  overflow-y: auto; /* 关键：让菜单内容可滚动 */
  background-color: #fff;
  padding: 1rem;
}

.sticky-close-btn {
  position: sticky;
  bottom: 0;
  padding: 1rem 0;
  background-color: #fff; /* 和菜单背景一致，防止滚动时透显下方内容 */
  border-top: 1px solid #e5e7eb; /* 可选：加个分隔线，区分菜单内容和按钮 */
}

为什么推荐这个方案？ #

• 完全基于CSS，不需要额外的JS逻辑
• 按钮只会在菜单容器内固定，不会跑到页面其他区域
• 适配性强，不管菜单内容多长，都会自动在滚动到底部时固定住

方案二：使用position: fixed（适合特殊场景） #

如果你的菜单本身是固定定位的，也可以给关闭按钮用fixed定位，不过需要手动对齐菜单的位置：

.sticky-close-btn {
  position: fixed;
  left: 0; /* 和菜单的left值一致 */
  bottom: 0;
  width: 320px; /* 和菜单宽度一致 */
  padding: 1rem;
  background-color: #fff;
  border-top: 1px solid #e5e7eb;
}

注意事项： #

• 如果菜单的宽度或位置有变化，按钮的样式也要跟着调整，灵活性不如sticky
• 适合那些需要兼容非常旧浏览器的场景（不过现在sticky已经被绝大多数现代浏览器支持了）

额外提示 #

• 一定要给菜单容器设置overflow-y: auto，否则sticky定位不会生效
• 关闭按钮的背景色要和菜单主体保持一致，避免滚动时出现内容透过按钮的情况
• 如果菜单有底部padding，可以把按钮的bottom值设为对应的padding大小，比如bottom: 1rem，让按钮和菜单边缘对齐

内容的提问来源于stack exchange，提问作者Programming123