使用sticky-kit时如何根据滚动方向动态设置stick_in_parent的offset_top值

你原有代码不生效的核心原因是：sticky-kit 首次调用 stick_in_parent() 完成实例初始化后，重复调用同一方法传入新配置不会覆盖原有参数，必须先销毁已存在的实例再重新初始化，新的 offset_top 配置才会生效。

完整实现代码如下：

// 记录上一次滚动的位置
let lastScrollTop = 0;
// 节流标记，避免滚动事件高频触发导致性能问题
let ticking = false;

// 监听窗口滚动事件
$(window).on('scroll', function () {
  const currentScrollTop = $(this).scrollTop();
  if (!ticking) {
    window.requestAnimationFrame(() => {
      // 判断滚动方向：当前滚动位置小于上一次为向上滚动
      const isScrollUp = currentScrollTop < lastScrollTop;
      // 销毁原有sticky-kit实例
      $("#aside").trigger("sticky_kit:detach");
      // 按滚动方向重新初始化，传入对应偏移值
      $("#aside").stick_in_parent({
        offset_top: isScrollUp ? 10 : 0
      });
      // 更新上一次滚动位置，兼容滚动到顶部的边界情况
      lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop;
      ticking = false;
    });
    ticking = true;
  }
});

// 页面加载完成后先初始化一次侧边栏固定效果
$("#aside").stick_in_parent({ offset_top: 10 });

如果你的侧边栏父容器存在高度动态变化的场景，可以在父容器高度更新后手动调用 $("#aside").trigger("sticky_kit:recalc") 触发sticky-kit重新计算位置，避免出现偏移异常。

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