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