The spec implies that:
header {
position: sticky;
anchor-name: --header;
top: 0;
}
.controls {
position: sticky;
anchor-scroll: --header;
anchor-name: --controls;
top: anchor(--header bottom);
}
th {
position: sticky;
anchor-scroll: --controls;
top: anchor(--controls bottom);
}
Should work, but 'stickiness' is not taken into account in the current build. Not sure why the anchor names are global instead of following the normal cascade. you could just have: .sticky {
position: sticky;
anchor-scroll: --sticky;
top: anchor(--sticky bottom, 0);
anchor-name: --sticky;
}
And .sticky children would stick to the bottom of their .sticky ancestors. As it is it still seems like most practical use cases will wind up needing JS to find and then name the position-anchor.