csslayout/contents/sticky-header.md

layout, title, description, keywords

layout	title	description	keywords
layouts/post.njk	Sticky header	Create a sticky header with CSS	css layout, css position sticky, css sticky header

HTML

<div>
    <header class="sticky-header__header">
        ...
    </header>
    <main>
        ...
    </main>
</div>

CSS

.sticky-header__header {
    /* Stick to the top */
    position: sticky;
    top: 0;
}

{% demo %}{% include "covers/sticky-header.njk" %}{% enddemo %}