javascriptwordpresstabscss-positionwpbakery

Wordpress Tabs (WPBakery plugin) does not allow CSS position fixed


On a webpage (Wordpress based) I am using the Tabs element from the WPBakery plugin. I have multiple tabs on my page. On one of the tabs I have added a table (with html elements: table, thead, tbody, etc).

I want the table thead element to be fixed (sticky/frozen) on pagescroll.

I have tried to do this with CSS. I added a class 'sticky-header' that is added by javascript to the thead element when you start to scoll past it. My CSS:

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

The problem is that the position fixed is not working. I scoll down the page and the header does not stay fixed.

If I remove the table from the WPBakery tab, it works. But I need the table inside the tab. No way around this requirement.

I am looking for two types of answers (either of them is fine as long as it solves the problem):

  1. A CSS answer: a way to 'force' the position:fixed (!important is not working)
  2. A Wordpress answer: how to make the Tabs element from the WPBakery not interfere with position:fixed

Edit: Adding JS below:

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');
    }
});

Solution

  • How does the "position: sticky;" property work?

    This solved my problem also. I had to add overflow: clip on multiple parents and it worked. CSS overflow was the cause.