Adam Racki's great blog post made me realize that it is possible to use display: grid to create sticky headers. As much as the contribution inspired me, it also confused me (why all this complexity in the code examples??). Here is what I took from it:
Sticky headers traditionally get positioned with
display: absolute;ordisplay: fixed;.While this does work, there is a much more elegant syntax with
display: grid.
Demo:
Code
HTML
<!DOCTYPE html>
<html>
<head>
<title>Sticky Header</title>
<meta charset="UTF-8" />
</head>
<body id="wrapper">
<h1 id="sticky">A Panda Bear</h1>
<main id="scroll-element">
<img alt="A panda bear" height="500px" src="https://images.unsplash.com/photo-1526716121440-dc3b4f254a0a"/>
</main>
</body>
</html>
CSS
#wrapper { height: 500px; display: grid; }
#scroll-element { overflow: auto; }
What's the magic?
tbh, there is none (as with everything you understand).
Really, what's going on?
Together the heading and the content are larger than what can be shown at once. The image is stands for lot of content. It has a fixed (large) height.
The CSS rule overflow: auto; allows the browser to scroll the id="scroll-element".
The header with id="sticky" is always completely shown since the id="scroll-element" can shrink and overflow.
That's it.
Top comments (1)
#sticky { position: sticky; top: 0; }