DEV Community

Cover image for Sticky Section Headers
Aileen Rae
Aileen Rae

Posted on

Sticky Section Headers

Hi folks! I threw together a Codepen to demo using position: sticky to "stick" section headers to the side of the screen while scrolling long blocks of content.

This layout pattern could be used for a list of blog posts, comments on a single blog post, or for keeping share buttons in view on long article pages. It could also be used for an instant messaging layout to "stick" a user's profile picture next to their message.

On mobile screen sizes, the headers stack vertically but stay sticky at the top of the screen.

Resources Used

References

Discussion (0)