Sticky sections

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
Try to scroll the main content to see each section sticks to the top of page.
<div style="
    height: 100%;
    overflow: scroll;
    <section style="
        /* Take full size */
        height: 100%;
        width: 100%;

        /* Stick to the top */
        position: sticky;
        top: 0;

    <!-- Repeat other sections -->

Related patterns

Sticky header

Sticky table column

Sticky table headers

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