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

Question

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

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

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

也许有人有解决方案或选项来使用自定义的粘性标题？

编辑：

随后T J answer 更改溢出，它修复了下拉菜单不会显示在粘性标题上的问题。 出现过滤器无法应用的问题，我通过更改修复了它：

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

到：

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

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

Answer 1

从.fix-sticky 类中删除overflow: hidden;

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