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

Question

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

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

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

也许有人有一个解决方案或选项来使用可以工作的自定义粘性标题？

编辑：

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

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

至：

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

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

标签： javascripthtmlcsstwitter-bootstrapbootstrap-table

Answer 1

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

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