Fixed Headers, On-Page Links, and Overlapping Content, Oh My!

Let's examine a common on-page link:

<a href="https://www.php.cn/link/7338a781b57bf45847c702bfd05b2a80">Section Two</a>

Clicking this link scrolls the browser to the element with the ID "section-two": <a href="https://www.php.cn/link/7338a781b57bf45847c702bfd05b2a80">Section Two</a>. This is a fundamental browser function.

However, the introduction of position: fixed; created a usability problem. While the browser still scrolls to the target element, that element might be hidden behind a fixed-position element, resulting in a poor user experience.

This "headbutting the browser window" effect, as I termed it years ago, has long presented a challenge. Various solutions have been proposed, including the five techniques documented by Nicolas Gallagher. Even on CSS-Tricks v17, with its fixed header, none of these solutions are entirely satisfactory. My workaround involved adding sufficient top padding to all relevant elements to accommodate the header.

But a superior solution has emerged!

Šime Vidas highlighted this in Web Platform News. While scroll-padding and scroll-margin are typically associated with CSS scroll snapping, they function effectively outside of a scroll snapping container.

html {
  scroll-padding-top: 70px; /* sticky header height */
}

Initially Chrome-exclusive, this solution now enjoys broader support, including Firefox and Safari (as of April 2021).

However, Hiroyuki Ikezoe pointed out that applying scroll-padding to the element isn't ideal, as document.scrollingElement actually refers to the element. Currently, Chrome (v73 and later) implements this functionality on , but a bug report suggests future changes limiting its use to the element. This mirrors the behavior of native custom scrollbars, which also only function on the .

The above is the detailed content of Fixed Headers, On-Page Links, and Overlapping Content, Oh My!. For more information, please follow other related articles on the PHP Chinese website!