水平滚动时如何禁用Waypoints？解决粘性元素不跟随滚动问题

架构老林

2026-6-13

Waypoints Sticky 水平滚动问题解决方案

你遇到的问题是Waypoints Sticky的固定定位在水平滚动时不会跟随移动，以下两种方案可以解决：

方案一：水平滚动时禁用Sticky，恢复相对定位

通过监听滚动事件判断滚动方向，动态切换元素的定位状态和Waypoints的启用状态：

确保基础CSS覆盖默认定位：

.board-header {
  position: relative;
}
.board-header.stuck {
  position: fixed;
  z-index: 100;
  top: 32px;
}

编写JavaScript逻辑：

// 初始化Sticky实例
const sticky = new Waypoint.Sticky({
  element: $('.board-header'),
  offset: 32
});

let lastScrollLeft = $(window).scrollLeft();

$(window).on('scroll', () => {
  const currentScrollLeft = $(window).scrollLeft();
  const header = $('.board-header');

  // 检测水平滚动
  if (currentScrollLeft !== lastScrollLeft) {
    if (header.hasClass('stuck')) {
      header.removeClass('stuck');
      sticky.disable();
    }
  } else {
    // 垂直滚动时恢复Sticky功能
    if (!sticky.enabled) {
      sticky.enable();
      Waypoint.refreshAll();
    }
  }

  lastScrollLeft = currentScrollLeft;
});

方案二：让固定元素跟随水平滚动移动

保持元素垂直固定的同时，通过动态修改left属性让它跟随水平滚动位置移动：

调整CSS：

.board-header.stuck {
  position: fixed;
  z-index: 100;
  top: 32px;
}

编写JavaScript逻辑：

const sticky = new Waypoint.Sticky({
  element: $('.board-header'),
  offset: 32,
  // 元素变为固定状态时初始化left值
  stuck: function() {
    const headerEl = $(this.element);
    headerEl.css('left', `${$(window).scrollLeft() - headerEl.offset().left}px`);
  }
});

// 监听滚动更新left值
$(window).on('scroll', () => {
  const stuckHeader = $('.board-header.stuck');
  if (stuckHeader.length) {
    stuckHeader.css('left', `-${$(window).scrollLeft()}px`);
  }
});