Sticky JS插件在平板/移动端异常：粘性头部定位偏移求助

我来帮你排查下这个Sticky JS在平板、移动端失效的问题，结合你的代码给几个实用的修复方向：

1. 先确认移动端Viewport配置是否正确 #

移动端如果没设置好viewport，页面会被自动缩放，Sticky JS的位置计算直接就乱了。赶紧检查你的HTML头部有没有加这个meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这个标签是移动端布局的基础，能让页面宽度完全适配设备屏幕，避免缩放导致的定位偏差。

2. 去掉Sticky容器的固定高度 #

看你的HTML里sticky-wrapper手动加了style="height:76px;"，这个固定高度在移动端很容易出问题——毕竟移动端的头部可能因为响应式布局（比如logo缩小、导航折叠）改变高度，Sticky JS本来会自动计算容器高度，手动固定反而会让定位偏移。

直接删掉这个手动设置的height：

<div id="sticky-wrapper" class="sticky-wrapper">
  <div class="outer-wrapper">
    <div class="header-inner">
      <a class="logo" href="/">
        <div id="logo" class="svg--logo"></div>
      </a>
    </div>
  </div>
</div>

另外，检查.outer-wrapper或者.header-inner有没有设置margin-top，如果有的话，要么改成padding-top，要么把Sticky配置里的topSpacing:0改成对应的数值（比如有20px的margin-top就设topSpacing:20）。

3. 调整Sticky JS的配置参数适配移动端 #

你的配置里getWidthFrom: "html"在移动端容易出问题，因为html的宽度可能受viewport或响应式样式影响波动。建议改成从头部容器本身获取宽度，同时调整几个参数：

var stickyWrapper = $(".outer-wrapper");
stickyWrapper.sticky({
  topSpacing: 0,
  getWidthFrom: ".outer-wrapper", // 改为从自身容器取宽度，更稳定
  responsiveWidth: true,
  widthFromWrapper: true, // 开启从wrapper获取宽度，适配响应式布局
  zIndex: 9999 // 把z-index调高，避免被移动端的其他固定元素（比如底部导航）遮挡
});

之前的zIndex设99可能不够，移动端很多默认组件的层级都不低，调到9999基本能保证头部在最上层。

4. 检查父元素的overflow属性 #

如果sticky-wrapper的任何父元素设置了overflow:hidden，Sticky元素就没法正常固定在视口顶部——这是CSS定位的常见坑。赶紧检查页面结构，确保.sticky-wrapper的所有父级都没有这个属性。

另外给头部加个明确的背景色，避免滚动时背后的内容透出来：

.outer-wrapper {
  background-color: #ffffff;
  position: relative;
}

5. 强制触发Sticky的位置重计算 #

有些移动端浏览器的滚动事件触发时机和桌面不一样，Sticky JS可能没能及时更新位置。可以加一段代码，在窗口 resize 或者滚动时强制刷新：

$(window).on('resize scroll', function() {
  stickyWrapper.trigger('sticky_kit:recalc');
});

这个方法能让Sticky JS重新计算定位，解决滚动时的偏移问题。

先试试这些方案，应该能解决头部被遮挡的问题。如果还不行，可以把移动端的CSS样式也贴出来，方便进一步排查～

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