Make sticky positioning work with internal links and scroll padding

[robglidden]

What problem does this address?

I would like sticky positioning introduced in 6.2 to work fully with smooth scrolling (scroll-behavior: smooth) and scroll-padding-top.

Currently, an internal link scrolls to the wrong place when sticky positioning is set on a group.

A simple example in 6.2 beta 4 in the Twenty Twenty-Three theme. The headings should not be covered up when you scroll to them.

Instead, the actual link location on the page should be visible when you scroll to it, and not covered up by the fixed group. Something like:

What is your proposed solution?

Scrolling with sticky elements is a great modern Web feature that requires only a bit of CSS and Javascript to fully implement.

Many web sites, like Canva web pages out of the box, implement stick headers with scroll-padding to avoid the problem of internal links scrolling to the wrong place.

However, to do this correctly, the size of the sticky element needs to be calculated, typically in a short Javascript snippet like this used to create second example above:

stickyBlockHeight = stickyBlockElement.offsetHeight;
document.documentElement.style.setProperty('--scroll-padding', stickyBlockHeight + "px");

A simple solution would be to generate a new CSS variable that would contain the height of the sticky element(s).

Then add in the CSS variable, changing:

top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px));
position: sticky;
z-index: 10;

to something more like:

top: calc(var(--wp-scroll-padding-top 0px) + var(--wp-admin--admin-bar--position-offset, 0px));
position: sticky;
z-index: 10;

But this likely misses many use cases for scroll padding like:

• More than one sticky header (maybe a user setting "add to scroll padding" on each sticky block?)
• Vertical scrolling (particularly interesting with CSS grid)
• Simple user customization in the site editor (you can only add CSS, not JS in site editor, without something like a theme.js)
• Sticky and scrolling, and CSS variables, work at multiple levels in a document, both inside a specific element and root and document wide.

A modern-Web-first design review would help.