position: sticky; and
overflow: scroll;, a quirky combination … but it can be fixed!
Say we want an overflowing table of columns and rows with sticky headings on a page. We want the headings to stick while scrolling on the document window, and we want to be able to scroll horizontally within the overflowing container.
When working with overflows you might find that your sticky element isn’t so sticky after all, which may cause some frustration. The browser doesn’t seem to be respecting
position: sticky;once we add overflow to the mix.
Let’s hope this quirky combination gets fixed in CSS itself. Until then we’ll need this JS-based solution.
❓ Not familiar with
position: sticky;? Check out this introduction then.