Home/Explore/

Sticky header

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
Try to scroll the main content to see the header sticks to the top of page.
<div>
    <header style="
        /* Stick to the top */
        position: sticky;
        top: 0;
    ">
        ...
    </header>
    <main>
        ...
    </main>
</div>

Related patterns

Sticky sections

Sticky table column

Sticky table headers

Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!