Foundation 6左侧粘性响应式菜单适配小屏下拉的实现问询

完全能达成你想要的效果——非小屏幕尺寸下左侧菜单粘性常驻，小屏幕自动转为侧边弹出菜单。Foundation框架自带的组件刚好能完美适配这个需求，下面给你梳理具体实现步骤：

核心实现逻辑 #

• 非小屏幕（中等及以上尺寸）：利用Foundation的Sticky插件将左侧菜单固定，结合网格系统（Grid）实现侧边栏+主内容的并排布局，滚动时菜单始终保持在可视区域。
• 小屏幕：隐藏左侧固定菜单，显示一个触发按钮，点击后通过Off-Canvas组件弹出侧边菜单（比普通下拉更符合移动端交互习惯）。

完整代码示例 #

HTML结构 #

<!-- 页面容器 -->
<div class="grid-container">
  <!-- 小屏幕专属菜单触发按钮 -->
  <button class="menu-toggle show-for-small-only" type="button" data-toggle="mobileMenu">展开菜单</button>

  <!-- 移动端侧边菜单（Off-Canvas） -->
  <div class="off-canvas position-left" id="mobileMenu" data-off-canvas>
    <ul class="vertical menu">
      <li><a href="#">首页</a></li>
      <li><a href="#">产品介绍</a></li>
      <li><a href="#">服务支持</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </div>

  <!-- 主内容区域（含桌面端粘性菜单） -->
  <div class="grid-x grid-margin-x">
    <!-- 桌面端粘性侧边菜单（仅中等及以上屏幕显示） -->
    <div class="cell medium-3 hide-for-small-only" data-sticky-container>
      <div class="sticky" data-sticky data-top-anchor="pageTop:top" data-btm-anchor="contentBottom:bottom">
        <ul class="vertical menu">
          <li><a href="#">首页</a></li>
          <li><a href="#">产品介绍</a></li>
          <li><a href="#">服务支持</a></li>
          <li><a href="#">联系我们</a></li>
        </ul>
      </div>
    </div>

    <!-- 页面主内容 -->
    <div class="cell medium-9" id="contentBottom">
      <!-- 这里填充足够长的测试内容，方便验证粘性效果 -->
      <p>测试内容...</p>
      <p>测试内容...</p>
      <!-- 重复多次直到内容超过视口高度 -->
    </div>
  </div>
</div>

<!-- Off-Canvas 背景遮罩层 -->
<div class="off-canvas-content" data-off-canvas-content></div>

自定义样式（可选） #

可以根据需求调整菜单的外观：

.sticky {
  padding: 1.5rem;
  background-color: #f5f5f5;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.menu-toggle {
  margin: 1rem 0;
  padding: 0.8rem 1.2rem;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 4px;
}

JavaScript 初始化 #

确保Foundation的插件正常工作：

$(document).foundation();

关键注意事项 #

• 断点控制：Foundation默认以640px作为中等屏幕的起始断点，如果需要调整，可以在项目的Sass变量中修改$breakpoint-medium的值。
• Sticky锚点配置：data-top-anchor和data-btm-anchor用来限定粘性菜单的生效范围，避免菜单超出主内容区域。
• 菜单内容同步：如果不想重复写两次菜单内容，可以用JS动态克隆桌面端菜单到移动端Off-Canvas容器中，或者用模板引擎复用菜单代码。

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