Is possible to skip one scroll context for a position sticky element?

Question

There is a way in css to specify relative to which scroll context a position sticky element should be floating?

<div class="main">
 <div class="row">
 <div class="cell">(0, 0)</div> <!-- I want this to be sticky -->
 <div class="cell">(0, 1)</div>
 <div class="cell">(0, 2)</div>
 ...
 <div class="subtable">
 <div class="somtehing">
 <div class="row">
 <div class="cell">(0, 0)</div> <!-- I also want this one to be sticky to the .main tag -->
 <div class="cell">(0, 1)</div>
 <div class="cell">(0, 2)</div>
 ...

check this codepen example

The first column of the nested table rows, despite of how many tags deep is inside the DOM tree always uses the .main div as it's scroll context because is its the first one that it found going up in the tree.

// this makes the subtables less annoying enforcing a scroll
// but makes the sticky to be relative to .subtable
.subtable
 height: 100px
 overflow-y: auto

check this other codepen example

If I enforce a height and a scroll-y auto to the .subtable div, then the stickyness of the cells in the subtable are applied to this scroll context since is the first one they found in their way up.

I would like to ignore that first one scroll context and tell to the sticky columns to be aware of the second scroll context in their way up of the tree. Or maybe to specify directly to which tag is supoused to listen.

Answer 1

Unfortunately, CSS doesn’t let you choose which ancestor a position: sticky element should stick to. By spec, a sticky element always uses the nearest scrolling ancestor (the first parent with overflow: auto | scroll | hidden). If your .subtable has its own scroll, then stickiness will stop there. If it doesn’t, the element will bubble up until it finds .main.

There isn’t a way to "skip" an intermediate scroll container or explicitly point sticky to another ancestor.

What you can do instead:

• Remove the extra scroll container: If you don’t really need .subtable to scroll on its own, let only .main handle scrolling. Then your sticky cells will naturally stick relative to .main.

• Duplicate/overlay the sticky column: Many table/grid libraries solve this by rendering a fixed header or column outside of the inner scroll area and keeping it aligned.

• Use JavaScript: As a fallback, you can listen to .main’s scroll and manually update the position of the "sticky" column inside the subtable (e.g. with transform: translateX(...)).

So the short answer: there’s no CSS property to tell a sticky element "ignore this scroll, listen to that one instead." You either restructure the DOM/scrolling or handle it with JS.

• Alejandro Guajardo: The thing is I need the scroll behavior in the .subtable in order to virtualize its row since they can be a lot. Also I have tried the translateX trick but the result is not as smoothy as the real sticky positioning.