Use scroll-margin with floating navigation

[jonathantneal]

• 🔍 Preview

This changes fragment links to use scroll-margin-top to offset their vertical scroll position when experienced alongside the floating navigation.

This also changes the vertical offset from 75px to calc(64px + 0.5em). The 64px accounts for the height of the SubNav, which is computed from px units. The 0.5em accounts for the visual breathing room of the target itself, which is often text and thusly defined by its em size.

Here are some examples of how the px and em work best together:

• 🔍 Example, link within <li>
• 🔍 Example, link within <h2>
• 🔍 Example, link within <h3>

This change also updates the CSS selector used for this effect so that it applies to all active targets that appear after the SubNav. This allows non-link destinations like the Sidebar or "Edit this page" button to receive the same treatment, as well as any links that may not conform to the exact DOM tree presently required.

Note: If the Sidebar "Filter" <input> had a name or id, you would also see that a link to that fragment would correctly scroll the page and focus the input.

• 🔍 Example, Sidebar, link without <a>
• 🔍 Example, "Edit this page", link without <a>, best experienced with a small screen

Coincidenting benefits

The use of the :target selector clearly communicates the intent of the rule while reducing the present complexity of the selector.

The use of a scroll-margin property clearly communicates the intent of the declaration, while the removal of the position and its related styles reduce layout complexity.

The scroll-margin property is not supported by Internet Explorer 11, which is a good thing because IE11 users do not experience the sticky navigation either. This prevents the unideal situation where an IE11 visitor is presented the wrong definition on a page, because the correct definition happens to be 75px below it.

[jescalan]

We spoke about this on slack, but would love a little more clarity in a code comment here. Re-request me when it's done and we'll be ready to roll!

[jonathantneal]

Definitely, thanks @jescalan! Done in f2015b9.

[github-actions]

I'm going to lock this pull request because it has been closed for 120 days ⏳. This helps our maintainers find and focus on the active contributions.
If you have found a problem that seems related to this change, please open a new issue and complete the issue template so we can capture all the details necessary to investigate further.