Foundation 6：Sticky导航栏与Off Canvas联动异常问题求助

嘿，我之前也踩过这个坑！问题根源在于Foundation处理Off Canvas的默认行为：当你点击汉堡图标打开Off Canvas面板时，框架会自动给<body>添加is-off-canvas-open类，把body的overflow设为hidden。这会直接导致页面滚动位置被重置到顶部，而Sticky导航栏是依赖滚动位置计算固定状态的，自然就跟着跳回页面顶部了。

下面给你几个可行的解决方案，按靠谱程度排序：

方案1：用JS保存+恢复滚动位置（最推荐） #

这个方法直接解决核心问题，既锁定页面不让滚动，又保留了打开Off Canvas时的滚动位置：

在你的JS代码里添加这两段监听事件：

// 打开Off Canvas时保存滚动位置并锁定页面
$(document).on('open.zf.offcanvas', '#offCanvasLeftOverlap', function() {
  const currentScroll = $(window).scrollTop();
  $('body')
    .data('savedScroll', currentScroll)
    .css({
      position: 'fixed',
      width: '100%',
      top: `-${currentScroll}px`
    });
});

// 关闭Off Canvas时恢复滚动位置
$(document).on('close.zf.offcanvas', '#offCanvasLeftOverlap', function() {
  const savedScroll = $('body').data('savedScroll');
  $('body').css({
    position: '',
    width: '',
    top: ''
  });
  $(window).scrollTop(savedScroll);
});

这段代码的逻辑是：打开面板时，用固定定位+负top值模拟当前滚动位置，把页面锁定住；关闭时移除固定定位，滚回之前的位置。这样Sticky导航栏就不会因为滚动位置重置而跳走了。

方案2：覆盖CSS避免overflow:hidden #

如果你不想写太多JS，可以试试修改Foundation的默认样式，但这个方法可能会让页面在Off Canvas打开时还能滚动，需要权衡：

body.is-off-canvas-open {
  overflow: visible !important;
}

不过这样用户在打开Off Canvas时仍能滚动页面，可能不符合你的交互需求，所以更推荐方案1。

方案3：调整Sticky组件配置 #

另外，确保你的Sticky导航栏配置正确，比如加上data-sticky-on="all"，确保在所有屏幕尺寸下都保持Sticky状态，避免响应式切换导致的异常：

<div class="sticky" data-sticky data-sticky-on="all">
  <!-- 你的导航栏内容，包含汉堡触发按钮 -->
</div>

我自己用方案1解决了这个问题，亲测有效，你可以试试看！

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