Make headers sticky?

[domenic]

See https://twitter.com/domenic/status/1266480528066256898 and https://gist.github.com/grassator/e76ec7775da5b1c14d125bc68e9a630d. It doesn't seem to work perfectly in general but maybe could be tweaked.

Some initial exploration makes me think that position: sticky was mostly designed to be used in conjunction with container elements, i.e. we'd have to restructure the spec to introduce <section> wrappers around each section of the spec.

[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)