垂直swiper容器内固定头部滚动时无法吸顶的问题求助

云上老周

2026-10-25

问题根源梳理

滚动监听完全错配：你现在做的垂直滚动效果完全是Swiper容器内部消化的，页面本身根本不会触发浏览器窗口层面的滚动，所以你写的$(window).scroll监听根本不会运行，$(window).scrollTop()永远是0，根本到不了>=100的判断条件，给头部加固定样式的逻辑自然完全失效。
高度计算失效：.Con1写了height:50%，百分比高度得靠父元素有明确的固定高度才能计算生效，现在html、body都没设置满屏高度，这个50%最后算出来可能就是0，Swiper容器连正常高度都没有，滚动本身就不符合预期。
固定样式不匹配：就算手动给头部加上fixed类，你写的样式里把宽度设成了100%，原来的头部是在宽度70%的容器里的，固定之后直接撑满整个屏幕，位置和原来完全对不上。

可直接落地的修正方案

先补上全局高度规则，让百分比高度能正常计算：

html, body {
  height: 100%;
  margin: 0;
}

把原来监听窗口滚动的代码换掉，直接用Swiper实例自带的滚动事件判断什么时候触发吸顶：

// 写在Swiper初始化代码的后面，实时监听容器内部的滚动偏移
swiper.on('scroll', function() {
  const headerHeight = $('.ConHeader').outerHeight();
  // 当头部被完全滚出可视区域的时候，触发吸顶
  if (Math.abs(this.translate) >= headerHeight) {
    $('.ConHeader').addClass('fixed');
  } else {
    $('.ConHeader').removeClass('fixed');
  }
})

修正fixed类的样式，和原有容器的尺寸、位置对齐：

.fixed {
  position: fixed;
  top: 0;
  // 和外层Con1的宽度保持一致，不要撑满整个屏幕
  width: 70%;
  // 和容器的水平居中位置对齐
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}