求助：StickyJS水平滚动时取消粘性，仅垂直滚动吸顶

嘿，我刚好碰到过类似的场景，给你几个可行的解决方案，帮你实现「仅垂直滚动吸顶，水平滚动取消粘性」的需求：

方法一：监听滚动事件动态切换粘性状态 #

StickyJS的核心是给目标元素添加固定定位的类（默认是is-sticky），我们可以通过监听页面滚动，区分水平/垂直滚动行为，动态控制这个类的存在：

1. 先初始化变量记录滚动状态：

let lastScrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
const stickyDiv = document.querySelector('.your-sticky-element'); // 替换成你的div选择器

2. 添加滚动监听逻辑：

window.addEventListener('scroll', () => {
  const currentScrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
  const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;

  // 判断是否发生了水平滚动
  if (currentScrollLeft !== lastScrollLeft) {
    // 水平滚动时移除粘性类，取消固定
    stickyDiv.classList.remove('is-sticky');
  } else {
    // 垂直滚动时，触发StickyJS的更新逻辑，让它重新判断是否需要吸顶
    if (window.Sticky) {
      // 如果StickyJS实例存在，调用update方法
      new Sticky(stickyDiv).update();
    } else {
      // 也可以手动判断垂直滚动位置，控制粘性类
      if (currentScrollTop > stickyDiv.offsetTop) {
        stickyDiv.classList.add('is-sticky');
      } else {
        stickyDiv.classList.remove('is-sticky');
      }
    }
  }

  // 更新上次滚动的水平位置
  lastScrollLeft = currentScrollLeft;
});

⚠️ 注意：如果你在初始化StickyJS时自定义了粘性类名，记得把is-sticky替换成你自己设置的类。

方法二：修改StickyJS源码从根源解决 #

如果你愿意调整StickyJS的核心逻辑，可以在它的滚动处理函数里加入水平滚动的判断，直接跳过粘性逻辑：

找到StickyJS源码中的scrollHandler函数，添加如下判断：

function scrollHandler() {
  const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
  const lastScrollLeft = this.lastScrollLeft || 0;

  // 检测到水平滚动时，移除粘性类并终止后续逻辑
  if (scrollLeft !== lastScrollLeft) {
    this.lastScrollLeft = scrollLeft;
    this.el.classList.remove(this.options.className);
    return;
  }

  // 保留原有的垂直滚动粘性处理逻辑...
}

这种方法一劳永逸，不需要额外写监听代码，但需要你有权修改第三方库的代码。

方法三：用CSS position: sticky配合JS替代StickyJS #

如果你的项目对兼容性要求不高（现代浏览器都支持position: sticky），可以直接用原生方案，更轻量：

1. 先给元素设置基础粘性样式：

.your-sticky-element {
  position: sticky;
  top: 0;
  /* 其他自定义样式 */
}

2. 同样通过滚动监听控制定位属性：

let lastScrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
const stickyDiv = document.querySelector('.your-sticky-element');

window.addEventListener('scroll', () => {
  const currentScrollLeft = window.pageXOffset || document.documentElement.scrollLeft;

  if (currentScrollLeft !== lastScrollLeft) {
    // 水平滚动时改成相对定位，取消粘性
    stickyDiv.style.position = 'relative';
  } else {
    // 垂直滚动时恢复粘性定位
    stickyDiv.style.position = 'sticky';
  }

  lastScrollLeft = currentScrollLeft;
});

你可以根据自己的项目复杂度和依赖情况选择合适的方法，第一种方法不需要修改源码，适配性最强，推荐优先尝试。

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