Semantic UI：如何在模态窗口中使用Sticky组件？

这个问题我之前踩过坑！核心问题出在Sticky的初始化时机和滚动上下文匹配上，咱们一步步来搞定：

问题根源 #

1. 模态框默认是隐藏状态，页面加载时它内部元素的尺寸、位置都没确定，这时候初始化Sticky会让组件拿不到正确的计算参数，自然没法正常工作。
2. 你当前的代码没指定Sticky的滚动上下文，它默认会绑定到window，但模态框的滚动是由内部的.scrolling content容器负责的，两者不匹配就导致固定失效。

修复方案 #

我们要等模态框完全显示后再初始化Sticky，并且明确把滚动上下文指定为模态框的内容容器：

// 先给模态框绑定显示完成的事件
$('.ui.modal').modal({
  onVisible: function() {
    // 定位到模态框内的滚动容器
    const $scrollContainer = $('.scrolling.content', this);
    // 初始化Sticky并指定上下文
    $('.ui.sticky', this)
      .sticky({
        type: 'fixed',
        offset: 200,
        context: $scrollContainer // 关键：让Sticky跟随模态框内容的滚动
      })
      .sticky('refresh'); // 强制刷新位置计算，确保参数准确
  }
});

// 如果是通过按钮触发模态框，示例代码如下：
$('.open-modal-btn').on('click', function() {
  $('.ui.modal').modal('show');
});

额外小提示 #

• 如果你的模态框是动态生成的（比如通过JS追加到DOM中），也要确保在模态框被添加到DOM并完全显示后，再执行Sticky的初始化逻辑。
• 排查问题时可以打开浏览器控制台，检查Sticky元素是否被添加了fixed类，以及对应的定位样式是否正确，这能帮你快速定位问题点。

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