Wordpress Tabs（WPBakery 插件）不允许固定 CSS 位置

Question

在网页（基于 Wordpress）上，我使用 WPBakery 插件中的选项卡元素。我的页面上有多个选项卡。在其中一个选项卡上，我添加了一个表格（带有 html 元素：table、thead、tbody 等）。

我希望表格标题元素在页面滚动上固定（粘性/冻结）。

我尝试用 CSS 来做到这一点。我添加了一个类“sticky-header”，当您开始滚动它时，该类由 javascript 添加到 thead 元素。我的CSS：

.sticky-header {
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 1000;
}

问题是固定的位置不起作用。我向下滚动页面，标题没有保持固定。

如果我从 WPBakery 选项卡中删除该表，它就可以工作。但我需要选项卡内的表格。没有办法绕过这个要求。

我正在寻找两种类型的答案（只要能解决问题就可以）：

1. CSS 答案：一种“强制”位置的方法：固定（！重要不起作用）
2. Wordpress 答案：如何使 WPBakery 中的 Tabs 元素不干扰位置：固定

编辑：添加下面的JS：

window.addEventListener('scroll', function() {
    var table = document.getElementById('table1');
    var header = table.querySelector('thead');
    var rect = table.getBoundingClientRect();
    var tableTop = rect.top + window.pageYOffset;

    if (window.pageYOffset >= tableTop) {
        header.classList.add('sticky-header');
    } else {
        header.classList.remove('sticky-header');
    }
});

Answer 1

“位置：粘性；”如何实现物业工作？

这也解决了我的问题。我必须在多个父母上添加溢出：剪辑，它起作用了。 CSS 溢出是原因。