csslayout/contents/sticky-sections.md

layout, title, description, keywords

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

HTML

<div class="sticky-sections">
    <section class="sticky-sections__section">
        ...
    </section>

    <!-- Repeat other sections -->
    ...
</div>

CSS

.sticky-sections {
    height: 100%;
    overflow: scroll;
}

.sticky-sections__section {
    /* Take full size */
    height: 100%;
    width: 100%;

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

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