Alert
Take part in the Barrier-Fasting! Duration from to
Day 31 sticky header + scroll-margin-top
Table of contents
Introduction
A sticky header has advantages: If the logo and navigation are always visible, users can quickly navigate to the home page and all other menu items, provided they are using sighted navigation with a mouse or finger. In addition, the logo can always remain visible, which is not only helpful for user orientation but also increases brand recognition.
Plain language and sticky headers
A fixed header is often a great help, especially for users who rely on easy-to-read language. It may therefore be worth considering fixing the header only if the page language is set to <html lang='en-simple'.
The problem with sticky headers and anchor links
Things get interesting when a website with a sticky header also contains anchor links, such as skip links. Browsers do not 'see' sticky headers. Accordingly, they do not calculate their height when jumping to an anchor link. The content of the anchor link is then initially covered. Users must notice this and scroll up to see the desired content from the beginning. This creates a barrier that we can remove with little effort.
To allow you to test this, I have created a table of contents for this page, made the header sticky, and implemented the code in my CSS.
Scroll margin top
There is now a CSS rule that promises to remedy almost all common display problems. In this case, it is Scroll-Margin-Top01.
Space is very limited in height, especially on mobile devices in landscape format. Therefore, the header should not be set to sticky here. Even on larger screens, a sticky header causes problems if the browser window is not high enough or the font is very large. It is therefore worth fixing the header only when a certain height is available. The height should always be specified in rem so that it is relative to the font size:
@media (min-height: 30rem) {
header{
position: sticky;
top: 0;
z-index: 50000;
min-height: 6rem;
}
*:target {
scroll-margin-top: 7rem;
}
}
The exact height of the header and scroll-margin-top depend on the project.