如何将粘性 header 添加到具有下拉过滤器作为标题的引导表？

Question

我正在尝试使用 bootstrap-table 并给它一种“Excel 感觉”。 可以选择根据里面的值快速过滤列。 但我似乎无法让它与粘性标题一起使用，粘性 header (data-sticky-header="true") 有一个引导表插件。

我尝试使用 bootstrap 5 下拉菜单创建一些内容并将其附加到标题，效果很好，但是当粘性 header 被激活时（将头部滚动到视图之外以便它启动），过滤器和下拉菜单停止工作。

这是示例，您可以看到它工作正常，直到您尝试向下滚动。

也许有人有一个解决方案或选项来使用自定义的粘性 header 可行？

编辑：

随后TJ 回答更改溢出，它解决了下拉菜单不会显示在粘性 header 上的问题。 存在过滤器不适用的问题，我通过更改来修复它：

  const checkboxList = document
    .querySelector("#departmentDropdownMenu")
    .querySelectorAll("input");

至：

const dropdownUL = cb.parentElement.parentElement.parentElement;
  const checkboxList = dropdownUL.querySelectorAll("input");

但是现在我遇到的一个问题是，当我滚动时，这个过滤器会应用一次，但是如果我再次单击下拉菜单，它会“重置”到它开始时的状态（当我滚动过去它的入口点时）。 它更改了过滤器，但在视图中，它似乎每次都“重置”为 position。 如果在我开始滚动时在那里检查了某些内容，那么每次下拉菜单再次打开时都会出现检查。 我对此示例进行了更新

Answer 1

移除overflow: hidden; 来自.fix-sticky class

.fix-sticky {
  position: fixed!important;
  /* overflow: hidden; */
  z-index: 100;
}