Make headers sticky? about whatwg.org

[domenic]

Here was my initial attempt:

h2 { position: sticky; top: 0; background: white; }
h3 { position: sticky; top: 28px; background: white; }
h4 { position: sticky; top: 56px; background: white; }
h5 { position: sticky; top: 84px; background: white; }
h6 { position: sticky; top: 112px; background: white; }

The problem is that since we don't have sectioning containers, everything sticks to the top forever. If you add backgrounds (as I did above) this can be OK as, for each N, only the topmost hN shows. However this breaks down when you're looking inside a h4 and have recently scrolled past a h5; that recent h5 still shows up, leading to scenarios like this:

(Also, this really highlights how our section permalink markers are not lined up, boo.)

[domenic]

There's also some z-index issues (easy to fix).

However the big problem here is that this breaks cross-links in the spec. They get hidden under the headers. Maybe there are margin or padding hacks you can do to fix that, but it's pretty bad. See https://stackoverflow.com/q/10732690/3191 and links from there for more.

[hober]

Some initial exploration makes me think that position: sticky was mostly designed to be used in conjunction with container elements

Yup, that's what I had in mind at the time.

[emilio]

There's scroll-padding / scroll-margin you could use, to make sure you scroll at least to a "safe" place. (40% of the viewport height or such maybe? If that intersects with sticky headers somehow, then the sticky headers are probably being non-helpful at that point)